The State of WebFonts

on YouTube ↗29m

" summary

Defines characters vs glyphs, shows using Unicode ranges to pick Latin glyphs, demos CSS properties that toggle OpenType features (oldstyle figures, tabular numerals, discretionary ligatures, font-kerning) and the FontFace JS API that returns a promise and applies a class when loaded. Recommends subsetting and web formats, with measured compression benefits (WOFF1 ≈45% of originals, WOFF2 ≈32%). Describes color fonts via COLR/CPAL and SVG layers, font-feature-values for palettes, and variable fonts that animate axes and change weight without reflow with current support in Chrome 62+ and Safari tech previews.

AI-written summary · about

" chapters (6)

1. 0:00Introduction
2. 0:25Font terminology basics
3. 5:26OpenType features in CSS
4. 11:18Font performance tips
5. 16:40Future of web fonts
6. 28:51Q&A and summary

" related talks

• 40mCSS Fonts 4Chris Lilley · FrontMania 2018
• 26mThe State of Web TypographyBram Stein · CSSconf EU 2014
• 50mWebFonts - Level Up!Chris Lilley · CSSConf.Asia 2015
• 38mWebfonts in 2019: Everything changesChris Lilley · Frontend United 2019
• 51mTypography on the WebJohn Daggett · CSS Day 2015
• 45mOnce Upon a Drop Cap: A Look at Typography as UXJason Pamental · Web Unleashed 2016
• 31mWeb Font Mania - for Better or WorseGiulia Laco · CSSDay 2018
• 29mSyntax Highlight EverythingKenneth Ormandy · CSSConf.Asia 2016