Andras/BoundlessFlowCampus2K
3
6
Fork 0
Code Issues 143 Pull requests 14 Projects Releases Packages Wiki Activity Actions 2

Changed the application fonts #756

Merged
a22erigr merged 3 commits from 615-change-fonts into team_2_week_4 2026-05-06 07:35:32 +00:00
Conversation 7 Commits 3 Files changed 4 +1 -9
b23albst commented 2026-05-05 13:05:36 +00:00
Collaborator
Copy link

I changed the "default font" of the page to Arial, as stated in the webpage design from the wiki. I also removed unnecessary css that added the font to different components. As it already is in body, you only need to set the font of a component if you want to override the default.

It also says in the webpage design that "headlines" should use a serif font. As headlines is a bit abstract, I have added this font to card titles and the heading of the settings page as a test. Please tell me what you think about it!
In my honest opinion, I think using the serif font looks bad and that it is a case of HIS website standards being outdated, since not even his.se uses the stated fonts (other than in the logo).

If we decide to move forward with serif fonts, the font of the page header should probably be changed as well.

image

image

I changed the "default font" of the page to Arial, as stated in the webpage design from the wiki. I also removed unnecessary css that added the font to different components. As it already is in body, you only need to set the font of a component if you want to override the default. It also says in the webpage design that "headlines" should use a serif font. As headlines is a bit abstract, I have added this font to card titles and the heading of the settings page as a test. Please tell me what you think about it! In my honest opinion, I think using the serif font looks bad and that it is a case of HIS website standards being outdated, since not even his.se uses the stated fonts (other than in the logo). If we decide to move forward with serif fonts, the font of the page header should probably be changed as well. ![image](/attachments/bd5ccfdb-7023-4706-b415-978349d3d14a) ![image](/attachments/060705c1-d64d-4826-af4c-f5b00575aee8)
image.png
76 KiB
image.png
49 KiB
b23albst changed title from Changed the sans font and added a serif font to card titles and settings page to Changed the application fonts 2026-05-05 13:08:48 +00:00
b23albst commented 2026-05-05 13:11:11 +00:00
Author
Collaborator
Copy link

For the curious one, here is a comparison between the old font, IBM Plex Sans, and the new font, Arial
image

The font currently used on the his.se website is a google font called open sans

For the curious one, here is a comparison between the old font, IBM Plex Sans, and the new font, Arial ![image](/attachments/da49a3b0-08c9-4b97-afc1-7eba858f63fe) The font currently used on the his.se website is a google font called open sans
image.png
28 KiB
a22erigr requested reviews from c24elipe and removed review requests for a22erigr 2026-05-05 13:17:12 +00:00
c24elipe reviewed 2026-05-05 13:22:13 +00:00
c24elipe left a comment
Collaborator
Copy link

Have done a quick scan over the code, and looks good to me...
I will now pull it down to do a proper review.

Have done a quick scan over the code, and looks good to me... I will now pull it down to do a proper review.
👍 1
a22erigr 2026-05-05 13:24:18 +00:00
b23albst commented 2026-05-05 13:32:18 +00:00
Author
Collaborator
Copy link

As a clarification: this is not ready to be merged, but just a test of the different fonts from the webpage design from the wiki. If we like the serif font, it should be added to more "headlines"

As a clarification: this is not ready to be merged, but just a test of the different fonts from the webpage design from the wiki. If we like the serif font, it should be added to more "headlines"
c24elipe commented 2026-05-05 13:46:18 +00:00
Collaborator
Copy link

Review on issue #615 / PR #756

Whats done

Tested on CachyOS (Arch Linux) with Brave browser, and Firefox.

  • The App starts.
    • No problems related to the changes done in this PR are observed, and it compiles without problems.
    • On top of that, the desired font gets set correctly, as shown in the second picture.

image
image
image

Inspected the following files

  • frontend/src/app/theme.css:

    • Indentation/code styling
      • No problem
    • Naming convention
      • ok
    • Comments
      • exists since before changes were made, and still works.
    • General code quality
      • One small issue, according to the Coding Convention for CSS, the font names should be surrounded by quotation marks: Use double quotes when for example naming a font - "Arial". I presume that this applies here on line 57 -> 58.

  • frontend/src/components/Button/Button.css,
    frontend/src/components/HamburgerMenu/HamburgerMenu.module.css,
    and frontend/src/components/Stylings/Components.css:

    • Take the same I wrote above. They all contain the removal of a single line of CSS code, which previously assigned the font in multiple scripts and spots. Good that it was removed.

  • frontend/src/components/Card/Card.module.css, and frontend/src/pages/Settings.module.css

    • Both of the files have had one line added to them, to make a larger section of the webapp have the desired font. No problem with other words.

What needs to be done

A small fix to follow the Coding Convention for CSS. The font variable, when declared in theme.css, should have all font names surrounded by quotation marks.

From that:

	/* Typography */
	--font-sans: Arial, 'IBM Plex Sans', system-ui, sans-serif;
	--font-serif: Georgia, serif;

To this

	/* Typography */
	--font-sans: "Arial", "IBM Plex Sans", "system-ui", "sans-serif";
	--font-serif: "Georgia", "serif";

Besides that, I agree with @b23albst that some other font may have worked better. But all that is meant to be achieved within the scope of the issue is done.

Conclusion

Once the small problem is fixed, it can be merged.

# Review on issue #615 / PR #756 ## Whats done ### Tested on CachyOS (Arch Linux) with Brave browser, and Firefox. * The App starts. * No problems related to the changes done in this PR are observed, and it compiles without problems. * On top of that, the desired font gets set correctly, as shown in the second picture. ![image](/attachments/2af54e42-f2a1-43f0-aa34-c8b3ca4263bf) ![image](/attachments/a0c2ad5c-a6e2-4f78-b741-fd15e245d4bc) ![image](/attachments/50e9dafa-fa87-438c-a2de-3270d62e51bf) ### Inspected the following files * **frontend/src/app/theme.css**: * Indentation/code styling * No problem * Naming convention * ok * Comments * exists since before changes were made, and still works. * General code quality * One small issue, according to the Coding Convention for CSS, the font names should be surrounded by quotation marks: Use double quotes when for example naming a font - "Arial". I presume that this applies here on line 57 -> 58. * **frontend/src/components/Button/Button.css**, **frontend/src/components/HamburgerMenu/HamburgerMenu.module.css**, and **frontend/src/components/Stylings/Components.css**: * Take the same I wrote above. They all contain the removal of a single line of CSS code, which previously assigned the font in multiple scripts and spots. Good that it was removed. * **frontend/src/components/Card/Card.module.css**, **and frontend/src/pages/Settings.module.css** * Both of the files have had one line added to them, to make a larger section of the webapp have the desired font. No problem with other words. ## What needs to be done A small fix to follow the Coding Convention for CSS. The font variable, when declared in theme.css, should have all font names surrounded by quotation marks. From that: ```CSS /* Typography */ --font-sans: Arial, 'IBM Plex Sans', system-ui, sans-serif; --font-serif: Georgia, serif; ``` To this ```CSS /* Typography */ --font-sans: "Arial", "IBM Plex Sans", "system-ui", "sans-serif"; --font-serif: "Georgia", "serif"; ``` Besides that, I agree with @b23albst that some other font may have worked better. But all that is meant to be achieved within the scope of the issue is done. ## Conclusion Once the small problem is fixed, it can be merged.
image.png
82 KiB
image.png
31 KiB
image.png
45 KiB
c24elipe approved these changes 2026-05-05 13:57:08 +00:00
b23albst commented 2026-05-06 06:24:38 +00:00
Author
Collaborator
Copy link

After discussion with the team leader, we decided to remove the serif style font, as it looked bad. Now Arial will be used as the default font for the whole application

After discussion with the team leader, we decided to remove the serif style font, as it looked bad. Now Arial will be used as the default font for the whole application
b24idalu approved these changes 2026-05-06 07:29:05 +00:00
b24idalu left a comment
Collaborator
Copy link

Review on #615

Whats done

Removed the serif font and applied previous feedback

Tested on windows using Chrome

  • App starts with no problems
    • The serif font has been removed
    • Looked through all cards and webpages, no problems found and no serif font found.

Inspected following files

  • frontend/src/app/theme.css:
    • Indentation/code styling
      • No problem
    • Naming convention
      • Follows naming convention
    • Comments
      • Still exists
    • General code quality
      • The font has been changed from being surrounded by nothing to ', but comment said to use ". Could be a prettier thing that autocorrects..
  • frontend/src/components/Button/Button.css,
    frontend/src/components/HamburgerMenu/HamburgerMenu.module.css,
    and frontend/src/components/Stylings/Components.css:
    • All looks good

What needs to be done

Unsure if the change from ' to " around the fonts can be applied, so will mark it as finished.

Conclusion

  • Everything works so it is ready to be merged, notes on the above thing mentioned (time to update wikin)
# Review on #615 ## Whats done Removed the serif font and applied previous feedback ### Tested on windows using Chrome + App starts with no problems + The serif font has been removed + Looked through all cards and webpages, no problems found and no serif font found. ### Inspected following files + frontend/src/app/theme.css: + Indentation/code styling + No problem + Naming convention + Follows naming convention + Comments + Still exists + General code quality + The font has been changed from being surrounded by nothing to ', but comment said to use ". Could be a prettier thing that autocorrects.. - frontend/src/components/Button/Button.css, frontend/src/components/HamburgerMenu/HamburgerMenu.module.css, and frontend/src/components/Stylings/Components.css: - All looks good ## What needs to be done Unsure if the change from ' to " around the fonts can be applied, so will mark it as finished. ## Conclusion + Everything works so it is ready to be merged, notes on the above thing mentioned (time to update wikin)
a22erigr merged commit ad95fb1a39 into team_2_week_4 2026-05-06 07:35:32 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
c24elipe
b24idalu
Labels
Clear labels   
_CRITICAL_

Only use this label for critical tasks that are project-scope,and must be addressed ASAP.

  
API

   
app

   
backEnd

   
Blocked-waiting-for-further-changes

   
bug

Something is not working

  
bug-only-on-server-for-mobile-not-webpage

   
Bug-Report-After-Merge

   
cleanup

Issues to cleanup the codebase (restructure folders, remove deprecated or smelly code)

  
close

Issue to close

  
design

   
duplicate

This issue or pull request already exists

  
enhancement

New feature

  
feature request

   
frontEnd

   
further-changes-needed

   
future-problem-not-fixint-this-period

   
help wanted

Need some help

  
invalid

Something is wrong

  
last-week-issue-to-fix

   
library

   
low-priority

   
needs input

Issue needs input from product owner or customer

  
needs review

issue is in need of review

  
not-implemented.

   
project documentation

   
question

More information is needed

  
research

   
reviewed

This Issue has been reviewed

  
Script

   
security

use this for security-related issues

  
SQL

  
style

   
Team 1

Team 1 is responsible for this issue

  
Team 2

Team 2 is responsible for this issue

  
team leaders

   
test-creation

   
testing

   
topLevel

Reserved for top-level, project-wide issues.

  
unassigned

   
Under-review

   
wontfix

This won't be fixed

No labels
_CRITICAL_
API
app
backEnd
Blocked-waiting-for-further-changes
bug
bug-only-on-server-for-mobile-not-webpage
Bug-Report-After-Merge
cleanup
close
design
duplicate
enhancement
feature request
frontEnd
further-changes-needed
future-problem-not-fixint-this-period
help wanted
invalid
last-week-issue-to-fix
library
low-priority
needs input
needs review
not-implemented.
project documentation
question
research
reviewed
Script
security
SQL
style
Team 1
Team 2
team leaders
test-creation
testing
topLevel
unassigned
Under-review
wontfix
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
3 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
Andras/BoundlessFlowCampus2K!756
No description provided.