Web Fonts are ▢▢▢ Rocket Science

Web fonts can be tricky—but are they rocket science? Web browsers have decided to make them invisible while they’re loading to avoid rendering system fonts to users. In order to properly manage the performance of our web fonts, we respectfully disagree…


This content originally appeared on Filament Group, Inc: Lab and was authored by Filament Group, Inc

Web fonts can be tricky—but are they rocket science? Web browsers have decided to make them invisible while they’re loading to avoid rendering system fonts to users. In order to properly manage the performance of our web fonts, we respectfully disagree with that decision. Roll up the sleeves on your lab coat, y’all.

In this talk, we discuss practical ways to stabilize the four main pillars of proper font loading:

  1. Avoiding invisible text.
  2. Triggering downloads sooner.
  3. Grouping repaints to reduce reflow.
  4. If you make font files smaller, they load faster.

SmashingConf London — Zach Leatherman on ‘Web Fonts are ▢▢▢ Rocket Science’ from Smashing Magazine on Vimeo.

Timestamps for Content

  • 01:25 The Mitt Romney Web Font Loading Problem
  • 03:08 The Flash of Invisible Text (FOIT) and Flash of Unstyled Text (FOUT)
  • 07:15 The History of @font-face Loading Behavior
  • 13:10 @font-face Syntax
  • 15:18 font-display for FOUT
  • 18:08 font-synthesis as a tool for better FOUT
  • 21:11 Using Faux Pas to detect font-synthesis: faux-pas and node-faux-pas
  • 24:25 preload
  • 25:30 The FOUT with a Class font loading strategy (for broadly supported, robust font loading)
  • 30:43 Critical FOFT with a Data URI
  • 32:39 Subsetting web fonts, Glyphhanger
  • 35:12 Variable Fonts


This content originally appeared on Filament Group, Inc: Lab and was authored by Filament Group, Inc


Print Share Comment Cite Upload Translate Updates
APA

Filament Group, Inc | Sciencx (2018-02-12T00:00:00+00:00) Web Fonts are ▢▢▢ Rocket Science. Retrieved from https://www.scien.cx/2018/02/12/web-fonts-are-%e2%96%a2%e2%96%a2%e2%96%a2-rocket-science-2/

MLA
" » Web Fonts are ▢▢▢ Rocket Science." Filament Group, Inc | Sciencx - Monday February 12, 2018, https://www.scien.cx/2018/02/12/web-fonts-are-%e2%96%a2%e2%96%a2%e2%96%a2-rocket-science-2/
HARVARD
Filament Group, Inc | Sciencx Monday February 12, 2018 » Web Fonts are ▢▢▢ Rocket Science., viewed ,<https://www.scien.cx/2018/02/12/web-fonts-are-%e2%96%a2%e2%96%a2%e2%96%a2-rocket-science-2/>
VANCOUVER
Filament Group, Inc | Sciencx - » Web Fonts are ▢▢▢ Rocket Science. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2018/02/12/web-fonts-are-%e2%96%a2%e2%96%a2%e2%96%a2-rocket-science-2/
CHICAGO
" » Web Fonts are ▢▢▢ Rocket Science." Filament Group, Inc | Sciencx - Accessed . https://www.scien.cx/2018/02/12/web-fonts-are-%e2%96%a2%e2%96%a2%e2%96%a2-rocket-science-2/
IEEE
" » Web Fonts are ▢▢▢ Rocket Science." Filament Group, Inc | Sciencx [Online]. Available: https://www.scien.cx/2018/02/12/web-fonts-are-%e2%96%a2%e2%96%a2%e2%96%a2-rocket-science-2/. [Accessed: ]
rf:citation
» Web Fonts are ▢▢▢ Rocket Science | Filament Group, Inc | Sciencx | https://www.scien.cx/2018/02/12/web-fonts-are-%e2%96%a2%e2%96%a2%e2%96%a2-rocket-science-2/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts