4 ms·

Mainly for performance reasons I've recently gone from using hosted/local Google Fonts to just calling the system ones (some variant of `-apple-system,BlinkMacS

Mainly for performance reasons I've recently gone from using hosted/local Google Fonts to just calling the system ones (some variant of `-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue`).

krono 6y ago
Something like this is really popular, covers most cases and older systems/browsers and even emojis: `ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji` For brand-specific fonts though, I highly recommend cleaning the font files from any characters/features you don't need, and then just serve the (now in many cases MUCH smaller) file directly.
- LeonB 6y ago
  Once you’ve cut it down to just the characters you need (say it’s the letters in your logo and slogan) could you inline that within the page itself (and how?) to make it not need an extra request.
  - igravious 6y ago
    Hmm, I just did a search for web fonts with data URIs In this article: https://www.zachleat.com/web/web-font-data-uris/ https://www.zachleat.com/web/web-font-data-uris/ mr. Leatherman advises against (because of the bulkiness of web fonts blocking rendering for too long) but he has not taken into account rolling your own custom mini-font with just the glyphs you need. So I think your idle musing may indeed have merit! Perhaps those more knowledgeable and preferably with benchmarked evidence could care to comment?
chinathrow 6y ago
This is also the Bootstrap approach, they call it the Native font stack. https://getbootstrap.com/docs/4.0/content/reboot/#native-font-stack https://getbootstrap.com/docs/4.0/content/reboot/#native-fon...
city41 6y ago
Seems most css frameworks are defaulting to this now. The only problem is Ubuntu is a very ugly font that looks very different from the others. At my previous job I was one of the only Linux users (using Ubuntu) and some designers were shocked how bad their designs looked on my computer due to the Ubuntu font. We removed Ubuntu from the list and just went with sans serif instead.
- buu700 6y ago
  I like Ubuntu personally (we used it for the Cyph logo), but not as an alternative to sans serif. I mean it's great for some things like headers, but I wouldn't choose to read a whole document printed in Ubuntu; that sounds terrible.
- swyx 6y ago
  these are known as system font stacks, and i've collected a bunch of them here: https://github.com/sw-yx/spark-joy#typography https://github.com/sw-yx/spark-joy#typography

krono 6y ago

Something like this is really popular, covers most cases and older systems/browsers and even emojis: `ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji` For brand-specific fonts though, I highly recommend cleaning the font files from any characters/features you don't need, and then just serve the (now in many cases MUCH smaller) file directly.

LeonB 6y ago
Once you’ve cut it down to just the characters you need (say it’s the letters in your logo and slogan) could you inline that within the page itself (and how?) to make it not need an extra request.
- igravious 6y ago
  Hmm, I just did a search for web fonts with data URIs In this article: https://www.zachleat.com/web/web-font-data-uris/ https://www.zachleat.com/web/web-font-data-uris/ mr. Leatherman advises against (because of the bulkiness of web fonts blocking rendering for too long) but he has not taken into account rolling your own custom mini-font with just the glyphs you need. So I think your idle musing may indeed have merit! Perhaps those more knowledgeable and preferably with benchmarked evidence could care to comment?

chinathrow 6y ago

This is also the Bootstrap approach, they call it the Native font stack. https://getbootstrap.com/docs/4.0/content/reboot/#native-font-stack https://getbootstrap.com/docs/4.0/content/reboot/#native-fon...

city41 6y ago

Seems most css frameworks are defaulting to this now. The only problem is Ubuntu is a very ugly font that looks very different from the others. At my previous job I was one of the only Linux users (using Ubuntu) and some designers were shocked how bad their designs looked on my computer due to the Ubuntu font. We removed Ubuntu from the list and just went with sans serif instead.

buu700 6y ago
I like Ubuntu personally (we used it for the Cyph logo), but not as an alternative to sans serif. I mean it's great for some things like headers, but I wouldn't choose to read a whole document printed in Ubuntu; that sounds terrible.
swyx 6y ago
these are known as system font stacks, and i've collected a bunch of them here: https://github.com/sw-yx/spark-joy#typography https://github.com/sw-yx/spark-joy#typography