Switch font to Noto #3325

New Issue

GiteaMirror · 2025-11-02T05:08:21-06:00

GiteaMirror commented

2025-11-02 05:08:21 -06:00

Originally created by @xf- on GitHub (May 13, 2019).

Switch from Lato to Noto font.

Noto is one of the biggest fonts available and subsets should contain a lot languages (582).
Also Noto provides Noto Sans Mono (and Noto Mono)

Sponsored/maintained by Google to run applications around the world.
https://www.google.com/get/noto/

I opened a issue because i have no idea if it is worth the effort and will get merged.

Originally created by @xf- on GitHub (May 13, 2019). Switch from Lato to Noto font. Noto is one of the biggest fonts available and subsets should contain a lot languages (582). Also Noto provides Noto Sans Mono (and Noto Mono) Sponsored/maintained by Google to run applications around the world. https://www.google.com/get/noto/ I opened a issue because i have no idea if it is worth the effort and will get merged.

GiteaMirror added the type/proposal label 2025-11-02 05:08:21 -06:00

GiteaMirror closed this issue

2025-11-02 05:08:21 -06:00

GiteaMirror commented

2025-11-02 05:08:22 -06:00

@silverwind commented on GitHub (May 14, 2019):

I'm generally 👍 to this if we can cover all our supported languages with it. Better to have one unified font style across languages.

Looks like we just need to extract the woff/woff2 from these webfonts, weight 400, right?

https://fonts.google.com/specimen/Noto+Sans/
https://fonts.google.com/specimen/Noto+Sans+JP/
https://fonts.google.com/specimen/Noto+Sans+KR/
https://fonts.google.com/specimen/Noto+Sans+TC/
https://fonts.google.com/specimen/Noto+Sans+SC/

Maybe there is some tooling available to automatically build the font CSS and woff files for Noto for all languages.

@silverwind commented on GitHub (May 14, 2019): I'm generally 👍 to this if we can cover all our supported languages with it. Better to have one unified font style across languages. Looks like we just need to extract the woff/woff2 from these webfonts, weight 400, right? https://fonts.google.com/specimen/Noto+Sans/ https://fonts.google.com/specimen/Noto+Sans+JP/ https://fonts.google.com/specimen/Noto+Sans+KR/ https://fonts.google.com/specimen/Noto+Sans+TC/ https://fonts.google.com/specimen/Noto+Sans+SC/ Maybe there is some tooling available to automatically build the font CSS and woff files for Noto for all languages.

GiteaMirror commented

2025-11-02 05:08:23 -06:00

@lafriks commented on GitHub (May 14, 2019):

I would also be ok with this font

@lafriks commented on GitHub (May 14, 2019): I would also be ok with this font

GiteaMirror commented

2025-11-02 05:08:23 -06:00

@mrsdizzie commented on GitHub (May 14, 2019):

For reference these tools were helpful in showing some differences between the fonts (for certain ASCII characters anyway).

http://www.identifont.com/differences?first=Lato&second=Noto+Sans&q=Go
https://tiff.herokuapp.com

@mrsdizzie commented on GitHub (May 14, 2019): For reference these tools were helpful in showing some differences between the fonts (for certain ASCII characters anyway). http://www.identifont.com/differences?first=Lato&second=Noto+Sans&q=Go https://tiff.herokuapp.com

GiteaMirror commented

2025-11-02 05:08:23 -06:00

@xf- commented on GitHub (May 14, 2019):

Status
I tested a lot yesterday and replaced the font (branch on the fork...), but providing JP KR TC and SC maybe not so easy. The fonts are really large otf 4.3 MB and woff2 3.4 MB. All other languges are included in other file like latin, Cyrillic ...
It is possible, but 2 files (Regular,(?Semi)Bold) at 6.8 MB.

Monospaced
Monospaced is not that interesting. Works for code, but no italic and most developers prefer standard system font for code.

Current problem with Lato
Lato is included in index and lato-v14 is included semantic ui as font-face.

My favorite solution so far

Use Noto
Not include remote sources for JP KR TC and SC, but define local in font-face (will be used if installed)
Get rid of all :lang definitions and use fallback over all important fonts - System font will be used at the end
Maybe cleanup the icon font chaos (tools like icomoon or fontastic can easily create own iconfont. No duplicates anymore). Some tools support a config file an can be generated with nodejs (extened if needed)

@xf- commented on GitHub (May 14, 2019): **Status** I tested a lot yesterday and replaced the font (branch on the fork...), but providing JP KR TC and SC maybe not so easy. The fonts are really large otf 4.3 MB and woff2 3.4 MB. All other languges are included in other file like latin, Cyrillic ... It is possible, but 2 files (Regular,(?Semi)Bold) at 6.8 MB. **Monospaced** Monospaced is not that interesting. Works for code, but no italic and most developers prefer standard system font for code. **Current problem with Lato** Lato is included in index and lato-v14 is included semantic ui as font-face. **My favorite solution so far** - Use Noto - Not include remote sources for JP KR TC and SC, but define local in font-face (will be used if installed) - Get rid of all :lang definitions and use fallback over all important fonts - System font will be used at the end - Maybe cleanup the icon font chaos (tools like icomoon or fontastic can easily create own iconfont. No duplicates anymore). Some tools support a config file an can be generated with nodejs (extened if needed)

GiteaMirror commented

2025-11-02 05:08:23 -06:00

@silverwind commented on GitHub (May 14, 2019):

The fonts are really large otf 4.3 MB and woff2 3.4 MB

But wouldn't browsers be smart enough to only download the font if they encounter a glyph from it (using CSS unicode-range)? https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range says "If the page doesn't use any character in this range, the font is not downloaded; if it uses at least one, the whole font is downloaded"

Monospaced is not that interesting

Agree, I also prefer a system font stack for monospace.

Lato is included in index and lato-v14 is included semantic ui as font-face.

I'd have no issues using !important to overrule that.

Maybe cleanup the icon font chaos

Ideally, icons should be inline SVG, icon fonts are just a dirty hack from the past for browsers without SVG support (all browsers since IE9 do).

@silverwind commented on GitHub (May 14, 2019): > The fonts are really large otf 4.3 MB and woff2 3.4 MB But wouldn't browsers be smart enough to only download the font if they encounter a glyph from it (using CSS `unicode-range`)? https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range says "If the page doesn't use any character in this range, the font is not downloaded; if it uses at least one, the whole font is downloaded" > Monospaced is not that interesting Agree, I also prefer a system font stack for monospace. > Lato is included in index and lato-v14 is included semantic ui as font-face. I'd have no issues using `!important` to overrule that. > Maybe cleanup the icon font chaos Ideally, icons should be inline SVG, icon fonts are just a dirty hack from the past for browsers without SVG support (all browsers since IE9 do).

GiteaMirror commented

2025-11-02 05:08:24 -06:00

@xf- commented on GitHub (May 14, 2019):

@silverwind yes the browser is smart enough, but 1 font file has 3.4 MB for JP SC... Like a really large Icon font. My "All Noto" download had > 1 GB font files. That means you incease download for JP or SC TH by nearly 7 MB without italic and trigger a complete repaint.
About partial download. No clue if you can really define the information that well. A lot of user content

I'd have no issues using !important to overrule that.

I would replace it in semantic ui css (first file loaded) and initially a Google Font import is in git history. Was already modified. Also use preload in header.

Ideally, icons should be inline SVG, icon fonts are just a dirty hack from the past for browsers without SVG support (all browsers since IE9 do).

I personally like icon fonts. Better to control (position inline) compared to background-image svg, easy to change color and apply. Inline in CSS or webpage? Supixel, hinting.. options are really good in fonts. for small icons. Logos are SVGs.

@xf- commented on GitHub (May 14, 2019): @silverwind yes the browser is smart enough, but 1 font file has 3.4 MB for JP SC... Like a really large Icon font. My "All Noto" download had > 1 GB font files. That means you incease download for JP or SC TH by nearly 7 MB without italic and trigger a complete repaint. About partial download. No clue if you can really define the information that well. A lot of user content > I'd have no issues using !important to overrule that. I would replace it in semantic ui css (first file loaded) and initially a Google Font import is in git history. Was already modified. Also use preload in header. > Ideally, icons should be inline SVG, icon fonts are just a dirty hack from the past for browsers without SVG support (all browsers since IE9 do). I personally like icon fonts. Better to control (position inline) compared to background-image svg, easy to change color and apply. Inline in CSS or webpage? Supixel, hinting.. options are really good in fonts. for small icons. Logos are SVGs.

GiteaMirror commented

2025-11-02 05:08:24 -06:00

@silverwind commented on GitHub (May 14, 2019):

1 font file has 3.4 MB for JP SC

Ugh, yes that seems quite big. Probably not a great idea to include it. Maybe @zeripath has a opinion.

Inline in CSS or webpage

Inline in HTML of course, anything else is a hack. Some tooling will be needed so that our template code can emit SVGs and I fear some major hacks to semantic-ui might be necessary to make it works, so probably not that great of an option unless we ditch semantic.

@silverwind commented on GitHub (May 14, 2019): > 1 font file has 3.4 MB for JP SC Ugh, yes that seems quite big. Probably not a great idea to include it. Maybe @zeripath has a opinion. > Inline in CSS or webpage Inline in HTML of course, anything else is a hack. Some tooling will be needed so that our template code can emit SVGs and I fear some major hacks to semantic-ui might be necessary to make it works, so probably not that great of an option unless we ditch semantic.

GiteaMirror commented

2025-11-02 05:08:25 -06:00

@xf- commented on GitHub (May 14, 2019):

@silverwind you are on discord?
I prefer inline aswell for logos/larger icons, but small icons (to add some visual) are really nice with font. You can add icon in docu inline and no c&p the svg. Even with "use" imports from one svg.

@xf- commented on GitHub (May 14, 2019): @silverwind you are on discord? I prefer inline aswell for logos/larger icons, but small icons (to add some visual) are really nice with font. You can add icon in docu inline and no c&p the svg. Even with "use" imports from one svg.

GiteaMirror commented

2025-11-02 05:08:25 -06:00

@silverwind commented on GitHub (May 14, 2019):

Not on discord (yet), I'm afraid. Keep the icon fonts for now. We can probably switch to SVG icons later when we have a CSS framework that supports them (bulma does).

@silverwind commented on GitHub (May 14, 2019): Not on discord (yet), I'm afraid. Keep the icon fonts for now. We can probably switch to SVG icons later when we have a CSS framework that supports them (bulma does).

GiteaMirror commented

2025-11-02 05:08:25 -06:00

@zeripath commented on GitHub (May 15, 2019):

Although I like Noto, I thought if we were going to remove Lato we were going to move to a native stack? Noto might make sense as a fall through though - if that's possible without browsers downloading the fonts unnecessarily.

@zeripath commented on GitHub (May 15, 2019): Although I like Noto, I thought if we were going to remove Lato we were going to move to a native stack? Noto might make sense as a fall through though - if that's possible without browsers downloading the fonts unnecessarily.

GiteaMirror commented

2025-11-02 05:08:26 -06:00

@xf- commented on GitHub (May 15, 2019):

@zeripath like github? i like the idea, but maybe some "bug" reports about alignment of icons.

@silverwind i never seen Bulma before and i looked into repo and syntax without braces in sass is really strange & uses hsl (+ hex + rgba) colors. Also in the hand of a single Maintainer (no Team or Organization). I normally use Bootstrap and import needed modules like Grid, maybe cards, responsive images. I prefer it, because a lot of external stuff uses the same classes or provide a bootstrap version. Of course you need to adjust some variables.
Looks like on Bulma you should to import all modules. Bootstrap

@xf- commented on GitHub (May 15, 2019): @zeripath like github? i like the idea, but maybe some "bug" reports about alignment of icons. @silverwind i never seen Bulma before and i looked into repo and syntax without braces in sass is really strange & uses hsl (+ hex + rgba) colors. Also in the hand of a single Maintainer (no Team or Organization). I normally use Bootstrap and import needed modules like Grid, maybe cards, responsive images. I prefer it, because a lot of external stuff uses the same classes or provide a bootstrap version. Of course you need to adjust some variables. Looks like on Bulma you should to import all modules. Bootstrap

GiteaMirror commented

2025-11-02 05:08:26 -06:00

@silverwind commented on GitHub (May 15, 2019):

Actually, I think I'd prefer a completely native stack too, especially given that we can not properly cover the asian fonts without a big load performance regression.

@xf- It was brought up in https://github.com/go-gitea/gitea/issues/5937 as a replacement for the ageing semantic-ui. Bootstrap 4 might also be a a valid option for a replacement framework, actually. I agree it might see better long-term support than Bulma.

@silverwind commented on GitHub (May 15, 2019): Actually, I think I'd prefer a completely native stack too, especially given that we can not properly cover the asian fonts without a big load performance regression. @xf- It was brought up in https://github.com/go-gitea/gitea/issues/5937 as a replacement for the ageing semantic-ui. Bootstrap 4 might also be a a valid option for a replacement framework, actually. I agree it might see better long-term support than Bulma.

GiteaMirror commented

2025-11-02 05:08:26 -06:00

@lafriks commented on GitHub (May 15, 2019):

Idea behind Bulma is to use flex for layouts that make it a lot more cleaner and lighter than bootsrtap

@lafriks commented on GitHub (May 15, 2019): Idea behind Bulma is to use flex for layouts that make it a lot more cleaner and lighter than bootsrtap

GiteaMirror commented

2025-11-02 05:08:27 -06:00

@silverwind commented on GitHub (May 15, 2019):

Yeah, Bulma is built around Flexbox while it's optional in Bootstrap. Not saying that Flexbox is a cure-all, but it's a step in the right direction.

@silverwind commented on GitHub (May 15, 2019): Yeah, Bulma is built around Flexbox while it's [optional](https://getbootstrap.com/docs/4.0/utilities/flex/) in Bootstrap. Not saying that Flexbox is a cure-all, but it's a step in the right direction.

GiteaMirror commented

2025-11-02 05:08:27 -06:00

@xf- commented on GitHub (May 15, 2019):

@silverwind @lafriks flexbox it isn't optional in bootstrap 4 (was in alpha (because of some issues with decimals and miscalculation in browsers - was changed/fixed), d-* selectors for changing the display value - your link was to 4.0 uptodate is 4.3) and bootstrap is lighter in my eyes and tested like nothing else.

Example:
https://getbootstrap.com/docs/4.3/layout/grid/

Only grid example is in repo of bootstrap (light weight):
https://github.com/twbs/bootstrap/blob/master/scss/bootstrap-grid.scss
I personally would never use the jquery tab stuff, but vanilla js is planed (i think v5) and a separate project does it already. Most times i use grid, reboot, images, utils (multiple like respnsive embed, text), nav, pagination, forms and thats nearly the complete list. No popover, no progress, no carousel...

You only include needed components and you can set your own variables or for example to avoid the button overhead. Include the mixin and call the mixin with wanted colors. 10% darker and other stuff are calculated by mixin.

@xf- commented on GitHub (May 15, 2019): @silverwind @lafriks flexbox it isn't optional in bootstrap 4 (was in alpha (because of some issues with decimals and miscalculation in browsers - was changed/fixed), d-* selectors for changing the display value - your link was to 4.0 uptodate is 4.3) and bootstrap is lighter in my eyes and tested like nothing else. Example: https://getbootstrap.com/docs/4.3/layout/grid/ Only grid example is in repo of bootstrap (light weight): https://github.com/twbs/bootstrap/blob/master/scss/bootstrap-grid.scss I personally would never use the jquery tab stuff, but vanilla js is planed (i think v5) and a separate project does it already. Most times i use grid, reboot, images, utils (multiple like respnsive embed, text), nav, pagination, forms and thats nearly the complete list. No popover, no progress, no carousel... You only include needed components and you can set your own variables or for example to avoid the button overhead. Include the mixin and call the mixin with wanted colors. 10% darker and other stuff are calculated by mixin.

GiteaMirror commented

2025-11-02 05:08:28 -06:00

@silverwind commented on GitHub (May 15, 2019):

I see. Well it certainly is an option. We will have to add quite a bit of custom CSS to whatever framework we choose. If Bootstrap allows to import single components, that'd probably be a great start to gradually move over. Would start by converting LESS to SCSS first and take it from there.

@silverwind commented on GitHub (May 15, 2019): I see. Well it certainly is an option. We will have to add quite a bit of custom CSS to whatever framework we choose. If Bootstrap allows to import single components, that'd probably be a great start to gradually move over. Would start by converting LESS to SCSS first and take it from there.

GiteaMirror commented

2025-11-02 05:08:28 -06:00

@xf- commented on GitHub (May 15, 2019):

Converter exists, but scss has more functions and i think shouldn't be used. Easier to generate a old css include it as well and delete part by part. set a good linter in place like and replace the lines. A lot of stuff can be done with cards/ menus provided and some adjusted variables.
This would allow for multiple merges and less problems while switching/replacing and other commits touching templates and classes.
Options like bold, uppercase should be set via class. Custom CSS should be reduced and maybe different kind of mobile menu

@xf- commented on GitHub (May 15, 2019): Converter exists, but scss has more functions and i think shouldn't be used. Easier to generate a old css include it as well and delete part by part. set a good linter in place like and replace the lines. A lot of stuff can be done with cards/ menus provided and some adjusted variables. This would allow for multiple merges and less problems while switching/replacing and other commits touching templates and classes. Options like bold, uppercase should be set via class. Custom CSS should be reduced and maybe different kind of mobile menu

GiteaMirror commented

2025-11-02 05:08:28 -06:00

@xf- commented on GitHub (May 18, 2019):

About the size
Bootstrap master min (complete) - last commit "v5 dist"
https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.min.css

v4.3.1 release

Bulma (min - complete)

(Depending on content gzip/brotli have so different size)

@xf- commented on GitHub (May 18, 2019): About the size **Bootstrap** master min (complete) - last commit "v5 dist" https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.min.css ![Screenshot_20190518_135014](https://user-images.githubusercontent.com/1295633/57969132-e6afed80-7973-11e9-9d56-308b1463db3c.png) v4.3.1 release ![image](https://user-images.githubusercontent.com/1295633/57969157-31316a00-7974-11e9-8c51-4e536daaa203.png) **Bulma** (min - complete) ![image](https://user-images.githubusercontent.com/1295633/57969144-0e9f5100-7974-11e9-8eac-0d204ca80e94.png) (Depending on content gzip/brotli have so different size)

GiteaMirror commented

2025-11-02 05:08:29 -06:00

@lafriks commented on GitHub (May 21, 2019):

About lighter I meant resulting layout html

@lafriks commented on GitHub (May 21, 2019): About lighter I meant resulting layout html

GiteaMirror commented

2025-11-02 05:08:29 -06:00

@lunny commented on GitHub (Jan 28, 2020):

Since we have used roboto font, I think we could close this one.

@lunny commented on GitHub (Jan 28, 2020): Since we have used roboto font, I think we could close this one.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/gitea#3325