
Font-display for the Masses (2016) - Tomte
https://css-tricks.com/font-display-masses/
======
wongarsu
`font-display: optional` looks like a weird design. It is basically `font-
display: fallback`, but then also does something completely unrelated.

Why isn't their `font-display` as well as `font-optional` (true or false) to
specify the two properties how fast a font should be displayed and whether to
load it at all on slow connections?

Also, `auto` and `fallback` seem to do the same thing, just with different,
undefined timings. It seems like a great feature, but the design of the css
attributes could use some work imho.

------
bitwize
Remember when browsers made a best effort to show you as much info as they
possibly could, pending the completion of downloads?

Nowadays, they assume "oh noes, we don't want to show anything at all, unless
it's exactly how the designer intended; better show a whole bunch of sweet
bugger all while the fonts, images, and JavaScript load".

I guess 'font-display' is a step back in the right direction. A small one
though.

------
martin_ky
I wish browsers provided a setting to prefer internal system fonts over web
fonts (or even option to disable web fonts completely). Readability is still
important - not everyone has a >200 ppi display. Fonts distributed with the
operating system are usually well optimized (hinted) for on-screen usage.
Proper hinting is critical to readability at lower resolutions / small font
sizes. Unfortunately it is a painstaking manual (and therefore expensive)
process [1]. That's why virtually all web fonts are simply print fonts,
unsuitable for on-screen usage, except at large point sizes (e.g. for
headings).

[1]
[https://www.typotheque.com/articles/hinting](https://www.typotheque.com/articles/hinting)

~~~
wongarsu
Firefox for Android has a setting to disable web fonts (Settings/Advanced/Show
web fonts).

Regular Firefox has the about:config parameter gfx.downloadable_fonts.enabled
that allows disabling webfonts. To solve the problems this article presents,
you could also just change gfx.downloadable_fonts.fallback_delay to something
shorter than 3000 (though that won't help with hinting).

Chrome apparently has (or had) a command line flag to disable web fonts, or
you can use extensions. I'm not sure if it's possible on mobile Chrome.

~~~
martin_ky
Thanks for the tip. The command line flag for Chrome is --disable-remote-fonts
and it works as of version 60. But this breaks also other, more useful uses of
web fonts, such as font icons. I guess my gripe is mostly with web designers
who prioritize design over readability.

