Hacker News new | past | comments | ask | show | jobs | submit login
Font-display for the Masses (2016) (css-tricks.com)
28 points by Tomte on Aug 22, 2017 | hide | past | favorite | 5 comments



`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.


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.


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


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.


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.




Consider applying for YC's Fall 2025 batch! Applications are open till Aug 4

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: