Font Loading Checklist

23 points by vinayakkulkarni 7 years ago | 8 comments

At risk of being downvoted, I reject the advice in this article and instead advocate designers sticking to “core fonts” (Tahoma, etc) or CSS’s built-in family names.

I accept that brochure-style websites genuinely benefit from being able to use the corporate identity’s prescribed typeface for prose, but for non-branded content-heavy pages such as blogs and, uh, “content” the actual utility provided is, in this commenter’s opinion, overrated.

A great argument against custom fonts on the web is that the “core fonts” have been designed for the screen, especially low-DPI environments - whereas I imagine a typical latter-day web-designer will be using a Retina-screen on a Mac - causing them to lose empathy for their 96dpi brethren who have to suffer with blurry and misaligned fonts on their webpages that were clearly designed for print, not screen, use.

I filter web fonts in my main Chrome profile and I’m in no hurry to re-enable that functionality.

stephenr 7 years ago | |

I’m actually a fan of using the “system font stack”, so your viewers get a font that’s optimised for their particular device/browser.

For headings/titles where you want a specific font.. maybe some kind of trick with an svg+fallback text?

Web fonts often cause a noticeable delay of unreadable text for me, presumably because of not fantastic latency due to being in Thailand.

bryanrasmussen 7 years ago | |

At the last place we were at the designer used not only a retina screen but also had sight problems meaning he always wore his super sharp glasses that meant he saw everything sharper than anyone else ever did.

It was difficult to explain to him that things he thought looked great would actually be a problem for many people.

blauditore 7 years ago |

Is it just the case for me or does that page itself suffer from FOIT?

It's quite visible when refreshing without cache (Ctrl+F5 on FF under Linux/Windows).

Vogtinator 7 years ago |

I block custom fonts everywhere:

- They make the page loading slower and consume bandwith

- It does not look the way I like it

- It can cause security issues

nothrabannosir 7 years ago | |

I would love to do this but too many sites use web fonts to provide custom icons with crucial functionality. E.g. media playback controls or e-mail actions.

Without web fonts a lot of app style websites become a guessing game of which squiggly box does what. :/

Really, what Id like is an easy “functionality level switch”. Base level (default): article websites. minimal js, no mouse events, no keyboard events, no fonts, no css hover effects. Level 2: apps. Fonts, full css, more js, still some limitations. Level 3: full trust / compatibility mode.

If there’s any such plugin, I’m all ears. uMatrix is a step, but not exactly in the right direction.

nicolaslem 7 years ago | | |

Font Awesome (a very popular icons library) started supporting SVG + JS as an alternative to CSS + webfont.

Not a perfect solution though as people blocking webfonts are likely to block JS as well.