platform webfont

Thanks to "cssweekly" and their link to "30 Seconds of CSS" - I saved very much research myself.

I do not like webfonts very much. I like eBay's Font Loading Strategy - your webapp user will not experience a flash of unstyled text (FOUT) or a flash of invisible text (FOIT). But other webfont strategies may lead to FOUT or FOIT. And if your webapp focuses mobile devices, connected via 4g or 3g - this makes a difference!

For a personal project I wanted to do some research, which font on which platform is available, and use it. Every user will see a slightly different font, but the webapp will load faster and since I do not have a brand font, a webfont has no benefit - system fonts do not look that bad.

Long story short, I started some weeks ago with the idea to find "all" platform font families and use them within this webapp. And today I read css weekly and scan through the 30 Seconds of CSS#system-font-stack and my work was done:

.system-font-stack {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

(copied from here).

Pretty cool.

Article image from Alice Donovan Rouse via unsplash and ghost.