Web Font Anti-Patterns

Oc­to­ber 13, 2015

Al­most every web de­vel­oper has used web fonts. Un­for­tu­nately, there is a lot of con­fu­sion about web fonts. Are they re­ally bad for per­for­mance? Maybe you should not use web fonts at all?

Fear not, this se­ries of ar­ti­cles takes a look at some of the most com­mon anti-pat­terns for cre­at­ing, us­ing, and load­ing web fonts. Web fonts can be great when used cor­rectly and with mod­er­a­tion. There is no need to block web fonts or dis­able them on mo­bile de­vices. How­ever, we — as web de­vel­op­ers — must do a bet­ter job of us­ing web fonts cor­rectly.

Hope­fully this se­ries of web font anti-pat­terns will help clar­ify ex­ist­ing prac­tices (good and bad) and guide you to­wards bet­ter web font us­age. The anti-pat­terns (in no par­tic­u­lar or­der):

  1. Overus­ing web fonts
  2. In­lin­ing fonts
  3. Ag­gres­sive sub­set­ting
  4. Us­ing lo­cal fonts
  5. Reimplementing caching (coming soon)
  6. Not styling fallback fonts (coming soon)
  7. …

Do you have a web font anti-pat­tern that you’d like to see added? Do you have ques­tions or com­ments? Feel free to reach out on Twit­ter.