WebFonts - Level Up!

on YouTube ↗50m

" summary

Claims include concrete compression gains: WOFF1 reduces files to about 45% and WOFF2 to ~32% of original, with TrueType showing the biggest wins. Practical tools and behaviors: font loading API returns promises (Chrome/Opera/Android support), Unicode-range acts as a client-side descriptor that blocks glyph use, and font-variant is higher-level sugar over four-letter OpenType codes. Performance tips: subset glyphs for large languages, avoid synthesized bold/italic when possible, and note color fonts exist as COLR/CPAL stacks or SVG tables that often bake colors into the font.

AI-written summary · about

" chapters (11)

1. 0:00Start
2. 3:39Basics
3. 6:42Properties & descriptors
4. 8:01Font stacks
5. 19:55Roman
6. 23:35Performance
7. 24:56Subsetting
8. 26:04WOFF compression
9. 29:43WOFF2 & mobile
10. 32:57From illuminated manuscripts...
11. 35:40TransType Demo

" related talks

• 29mThe State of WebFontsChris Lilley · View Source 2017
• 27mEfficient Web Type, c. 1556Kenneth Ormandy · CSSConf Australia 2015
• 51mTypography on the WebJohn Daggett · CSS Day 2015
• 50mFont Performance StrategiesMandy Michael · performance.now() 2024
• 45mOnce Upon a Drop Cap: A Look at Typography as UXJason Pamental · Web Unleashed 2016
• 42mAdvanced Web TypographyIdan Gazit · Write the Docs Prague 2014
• 31mWeb Font Mania - for Better or WorseGiulia Laco · CSSDay 2018
• 38mWebfonts in 2019: Everything changesChris Lilley · Frontend United 2019