[GH-ISSUE #435] Use system font #307

Closed
opened 2026-02-26 02:32:46 +03:00 by kerem · 12 comments
Owner

Originally created by @phanan on GitHub (Sep 5, 2016).
Original GitHub issue: https://github.com/koel/koel/issues/435

Right now Koel is using Roboto of various font weights. There's nothing wrong with that, but maybe we can just use the system font instead:

font-family: system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

The above CSS rule will use the default OS font. On OS X El Capitan for instance, the font is San Francisco, and the interface will look like this:

image

…which is not bad, especially considering hundreds of KBs of Roboto less to load and the native multi-byte support.

Originally created by @phanan on GitHub (Sep 5, 2016). Original GitHub issue: https://github.com/koel/koel/issues/435 Right now Koel is using Roboto of various font weights. There's nothing wrong with that, but maybe we can just use the system font instead: ``` css font-family: system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; ``` The above CSS rule will use the default OS font. On OS X El Capitan for instance, the font is [San Francisco](https://developer.apple.com/fonts/), and the interface will look like this: ![image](https://cloud.githubusercontent.com/assets/8056274/18250446/af169b7c-73ad-11e6-8070-ec845d6b4a90.png) …which is not bad, especially considering hundreds of KBs of Roboto less to load and the native multi-byte support.
kerem closed this issue 2026-02-26 02:32:46 +03:00
Author
Owner

@BernardGoldberger commented on GitHub (Sep 6, 2016):

I assuming that this will result in Koel loading faster, I would like to give a test, is

font-family: system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

what I need to do in Windows as well?

<!-- gh-comment-id:244932688 --> @BernardGoldberger commented on GitHub (Sep 6, 2016): I assuming that this will result in Koel loading faster, I would like to give a test, is > `font-family: system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;` what I need to do in Windows as well?
Author
Owner

@phanan commented on GitHub (Sep 7, 2016):

@bdgold You don't need to do anything. That rule works cross-OS.
Others: Please explain the thumbs down if you could, thanks!

<!-- gh-comment-id:245157554 --> @phanan commented on GitHub (Sep 7, 2016): @bdgold You don't need to do anything. That rule works cross-OS. Others: Please explain the thumbs down if you could, thanks!
Author
Owner

@BernardGoldberger commented on GitHub (Sep 18, 2016):

Doesn't look very good on my system Windows, opera.

Notice the following letters and numbers S, 2 and 5.

image

<!-- gh-comment-id:247856342 --> @BernardGoldberger commented on GitHub (Sep 18, 2016): Doesn't look very good on my system Windows, opera. Notice the following letters and numbers S, 2 and 5. ![image](https://cloud.githubusercontent.com/assets/10334679/18617205/42f83960-7d98-11e6-81b1-f6a64210907a.png)
Author
Owner

@phanan commented on GitHub (Sep 18, 2016):

It's subjective… I'd prefer system fonts any day.

On Mon, Sep 19, 2016 at 12:06 AM, bdgold notifications@github.com wrote:

Doesn't look very good on my system Windows, opera.

Notice the following letters and numbers S, 2 and 5.

[image: image]
https://cloud.githubusercontent.com/assets/10334679/18617205/42f83960-7d98-11e6-81b1-f6a64210907a.png


You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/phanan/koel/issues/435#issuecomment-247856342, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AHrt0sqae0cDY9cnWcVEvGXwgE9GGhbfks5qrWGBgaJpZM4J1HSE
.

<!-- gh-comment-id:247856698 --> @phanan commented on GitHub (Sep 18, 2016): It's subjective… I'd prefer system fonts any day. On Mon, Sep 19, 2016 at 12:06 AM, bdgold notifications@github.com wrote: > Doesn't look very good on my system Windows, opera. > > Notice the following letters and numbers S, 2 and 5. > > [image: image] > https://cloud.githubusercontent.com/assets/10334679/18617205/42f83960-7d98-11e6-81b1-f6a64210907a.png > > — > You are receiving this because you modified the open/close state. > Reply to this email directly, view it on GitHub > https://github.com/phanan/koel/issues/435#issuecomment-247856342, or mute > the thread > https://github.com/notifications/unsubscribe-auth/AHrt0sqae0cDY9cnWcVEvGXwgE9GGhbfks5qrWGBgaJpZM4J1HSE > .
Author
Owner

@phanan commented on GitHub (Sep 18, 2016):

Will font-size: normal look better?

<!-- gh-comment-id:247859776 --> @phanan commented on GitHub (Sep 18, 2016): Will `font-size: normal` look better?
Author
Owner

@BernardGoldberger commented on GitHub (Sep 18, 2016):

No

image

<!-- gh-comment-id:247860069 --> @BernardGoldberger commented on GitHub (Sep 18, 2016): No ![image](https://cloud.githubusercontent.com/assets/10334679/18617592/0e1848bc-7da1-11e6-825c-d356f825f7cf.png)
Author
Owner

@phanan commented on GitHub (Sep 19, 2016):

Hm… I'm more concerned about the YouTube button on the right. Is it always like that (dropped to a new line)?

<!-- gh-comment-id:247900359 --> @phanan commented on GitHub (Sep 19, 2016): Hm… I'm more concerned about the YouTube button on the right. Is it always like that (dropped to a new line)?
Author
Owner

@BernardGoldberger commented on GitHub (Sep 19, 2016):

Is it always like that?

No. Its the bigger [normal] font size, that is also the cause for the heading being so large.

<!-- gh-comment-id:247900882 --> @BernardGoldberger commented on GitHub (Sep 19, 2016): > Is it always like that? No. Its the bigger [normal] font size, that is also the cause for the heading being so large.
Author
Owner

@phanan commented on GitHub (Sep 19, 2016):

Shouldn't be. This is a screenshot of my Webkit, Windows 7:

image

<!-- gh-comment-id:247907359 --> @phanan commented on GitHub (Sep 19, 2016): Shouldn't be. This is a screenshot of my Webkit, Windows 7: ![image](https://cloud.githubusercontent.com/assets/8056274/18622272/8f904926-7e5f-11e6-9a54-4fc5b6f3b32f.png)
Author
Owner

@phanan commented on GitHub (Sep 19, 2016):

Oh, I get what you mean now. Well, Windows font rendering is known to be inferior to that of OS X :P

<!-- gh-comment-id:247907467 --> @phanan commented on GitHub (Sep 19, 2016): Oh, I get what you mean now. Well, Windows font rendering is known to be inferior to that of OS X :P
Author
Owner

@BernardGoldberger commented on GitHub (Sep 21, 2016):

So I did some digging and found this and basically it turns out that the issue is the font weight is set to 300, I went ahead and upped it to 400 which is normal and here is the result

image

note hoe the meta info is still an issue, but who cares?

It looks much better... however now the white font was too much to handle so I changed $colorMainText to e7e7e7 which makes it a little easier on the eyes, see image

image

I don't know how these changes will behave in other systems, let me know what you think.

Firefox in windows also looks great with these changes.

image

<!-- gh-comment-id:248736810 --> @BernardGoldberger commented on GitHub (Sep 21, 2016): So I did some digging and found [this](http://stackoverflow.com/questions/16891721/segoe-ui-light-font-not-displaying-properly-in-google-chrome) and basically it turns out that the issue is the font weight is set to 300, I went ahead and upped it to 400 which is `normal` and here is the result ![image](https://cloud.githubusercontent.com/assets/10334679/18727753/2e076b34-8018-11e6-89cb-604ffade2b33.png) note hoe the meta info is still an issue, but who cares? It looks much better... however now the white font was too much to handle so I changed `$colorMainText` to `e7e7e7` which makes it a little easier on the eyes, see image ![image](https://cloud.githubusercontent.com/assets/10334679/18728144/eb408d9c-8019-11e6-9609-13294c093393.png) I don't know how these changes will behave in other systems, let me know what you think. Firefox in windows also looks great with these changes. ![image](https://cloud.githubusercontent.com/assets/10334679/18728209/5167cd74-801a-11e6-8e0c-3b931fdd828a.png)
Author
Owner

@phanan commented on GitHub (Sep 22, 2016):

Thanks for the findings. Let me try them on Mac.

On Thu, Sep 22, 2016 at 4:43 AM, bdgold notifications@github.com wrote:

So I did some digging and found this
http://stackoverflow.com/questions/16891721/segoe-ui-light-font-not-displaying-properly-in-google-chrome
and basically it turns out that the issue is the font weight is set to 300,
I went ahead and upped it to 400 which is normal and here is the result

[image: image]
https://cloud.githubusercontent.com/assets/10334679/18727753/2e076b34-8018-11e6-89cb-604ffade2b33.png

note hoe the meta info is still an issue, but who cares?

It looks much better... however now the white font was too much to handle
so I changed $colorMainText to e7e7e7 which makes it a little easier on
the eyes, see image

[image: image]
https://cloud.githubusercontent.com/assets/10334679/18728144/eb408d9c-8019-11e6-9609-13294c093393.png

I don't know how these changes will behave in other systems, let me know
what you think.

Firefox in windows also looks great with these changes.

[image: image]
https://cloud.githubusercontent.com/assets/10334679/18728209/5167cd74-801a-11e6-8e0c-3b931fdd828a.png


You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/phanan/koel/issues/435#issuecomment-248736810, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AHrt0ginMlzgPfnA2Ftc_Gma8T7byvPDks5qsZbagaJpZM4J1HSE
.

<!-- gh-comment-id:248795277 --> @phanan commented on GitHub (Sep 22, 2016): Thanks for the findings. Let me try them on Mac. On Thu, Sep 22, 2016 at 4:43 AM, bdgold notifications@github.com wrote: > So I did some digging and found this > http://stackoverflow.com/questions/16891721/segoe-ui-light-font-not-displaying-properly-in-google-chrome > and basically it turns out that the issue is the font weight is set to 300, > I went ahead and upped it to 400 which is normal and here is the result > > [image: image] > https://cloud.githubusercontent.com/assets/10334679/18727753/2e076b34-8018-11e6-89cb-604ffade2b33.png > > note hoe the meta info is still an issue, but who cares? > > It looks much better... however now the white font was too much to handle > so I changed $colorMainText to e7e7e7 which makes it a little easier on > the eyes, see image > > [image: image] > https://cloud.githubusercontent.com/assets/10334679/18728144/eb408d9c-8019-11e6-9609-13294c093393.png > > I don't know how these changes will behave in other systems, let me know > what you think. > > Firefox in windows also looks great with these changes. > > [image: image] > https://cloud.githubusercontent.com/assets/10334679/18728209/5167cd74-801a-11e6-8e0c-3b931fdd828a.png > > — > You are receiving this because you modified the open/close state. > Reply to this email directly, view it on GitHub > https://github.com/phanan/koel/issues/435#issuecomment-248736810, or mute > the thread > https://github.com/notifications/unsubscribe-auth/AHrt0ginMlzgPfnA2Ftc_Gma8T7byvPDks5qsZbagaJpZM4J1HSE > .
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
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
starred/koel-koel#307
No description provided.