3 ms·
Something like this is really popular, covers most cases and older systems/browsers and even emojis: `ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,S
by 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 agoOnce 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 agoHmm, 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?