Scrutinizing @font-face

on YouTube ↗50m

" summary

Shows the actual bulletproof syntax for @font-face and why adding local() fallback avoids unnecessary downloads. Demonstrates descriptor-based substitution (font-weight works; font-variant and font-stretch are buggy), a Windows Helvetica rename that maps to Arial, and using unicode-range to swap ampersands and curly quotes. Tests reveal Chrome/Safari apply unicode-range while Firefox does not, and Firefox/IE sometimes eagerly download fonts even for empty content. Slides available at the linked PDF.

AI-written summary · about

" chapters (11)

1. 0:00Intro
2. 6:00Helvetica
3. 9:40Descriptors
4. 13:15Font Substitution
5. 19:00Font Resolution
6. 22:15Unicode Range
7. 26:15Icon Fonts
8. 30:35Custom Fonts
9. 32:45Lazy Loading
10. 37:15Progressive Enhancement
11. 39:15Internet Explorer

" related talks

• 29mThe State of WebFontsChris Lilley · View Source 2017
• 50mTypesetting for a Global WebChen Hui Jing · You Gotta Love Frontend 2019
• 26mThe State of Web TypographyBram Stein · CSSconf EU 2014
• 33mConquer Variable Web TypographyOliver Schöndorfer · Beyond Tellerrand Berlin 2018
• 45mOnce Upon a Drop Cap: A Look at Typography as UXJason Pamental · Web Unleashed 2016
• 26mBulletproof Icon FontsZach Leatherman · CSSConf US 2014
• 51mTypography on the WebJohn Daggett · CSS Day 2015
• 29mWeb typography: a non-English perspectiveChen Hui Jing · JSHeroes 2019