Important

This slide deck was created for use in a controlled environment, during a talk. It works best with a recent Firefox at 1920x1080. It WILL PROBABLY NOT work correctly in other browsers, due to limited support for CSS3 font-variant-* properties and css variables at this time. But the other browsers will catch up. Right? Right??!!

The State of WebFonts

Chris Lilley @svgeesus

Hello!
I’m Chris or @svgeesus

Technical Director at W3C

ex-W3C Technical Architecture Group

W3C Core Web Strategy

Started SVG (1996)

SVG WG Chair (1998-2006)

Co-authored PNG (1996)

CSS WG: Chair (1997-2002), Staff contact
CSS2 co-editor (@font-face, descriptors)
CSS3 Color co-editor
CSS4 Color co-editor

WebFonts

Fonts WG Chair (1996-1998)
WOFF 1.0, WOFF 2.0
Chromatic Fonts

Topics for today

Basics
OpenType Features & CSS
Performance
The future

Basics

Character: a codepoint, with properties

Glyph: visual representation of character(s)

ﬁ

character(s), glyph(s)

character(s), glyph(s), font(s)

Myriad Pro <— Font family

<— Faces
Light
Roman
Bold
Black
Italic
Condensed

Baskerville<— Font family

<— Faces
Roman
Semibold
Bold
Italic

Properties & descriptors


@font-face {
	font-family: Arvo; /* Descriptor */
	src: url(fonts/s.woff); /* Descriptor */
	font-weight: bold; /* Descriptor */
}

h1 {
	font-family: Arvo; /* Property */
	font-weight: bold; /* Property */
}

Descriptors: describe individual font faces

Properties: requests for styling

Font stacks

First font with glyphs for a given character is used

Problem: avoiding bad Latin glyphs in Japanese fonts

@font-face {
	font-family: Demo;
	src: url(Latin.woff), url(Japanese.woff);
}

Both fonts can’t be first!

unicode-range: Descriptor for allowed range of Unicode characters


	@font-face {
		font-family: 'Headings';
		src: url(fonts/Japanese.woff);
		unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F;
		/* yen, kanji, hiragana, katakana */
	}

unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F;

I'm really sorry about the unicode-range syntax. :(
What was I thinking?!

This & That: no need for extra elements

U+26: Use just the ampersand

This & That

OpenType Features & CSS

CAPITALE FULGURANT

et modeste avec ça

INCROYABLE astrale

OpenType features: Optional stylistic controls

Control with CSS: Fonts vary in features provided

font-variant: Preferred, but poor support

font-feature-settings: Cryptic, low-level, widespread support

1234567890ABC
1234567890abj

font-variant-numeric: ;

1/2 3/4 5/8
13/27 86/483

font-variant-numeric: ;

112,113.56

89,546.87

286,111.10

font-variant-numeric: ;

INCROYABLE
flaneur

font-variant-ligatures: ;

Roman
Italic
Bold

font-synthesis: ;
font-family: ;

JAVA Ta Wa

font-kerning: ;
letter-spacing: em;

Performance

Subset all the things!

Subsetting

Glyphs: Big space savings!
OpenType Tables: Moderate savings
Tools:
- fontsquirrel.com
- Typekit
- Behdad's fonttools

WOFF 1 compression

WOFF2: hmtx

WOFF2: glyf: Seven streams for better compression

WOFF2: loca: discard, recalculate

WOFF 2 compression

100%
45%
32%

WOFF 2.0: with TrueType glyphs

68%: 25% better than WOFF 1.0

WOFF 2.0: with CFF glyphs

63.5%: 15.5% better than WOFF 1.0

WOFF2 & mobile

Balance decompression time & download speed
Last 2% size gain doubles decode time!
Memory for decompression only 1.05x that for WOFF1




@font-face {
	font-family: Arvo;
	src: url(Arvo-BoldItalic.woff)
	     format ("woff");
	font-weight: bold;
	font-style: italic;
}

/* Font Loading API!
http://w3.org/TR/css-font-loading
Support: FF, Chrome, Opera, Android */
var arvo = new FontFace(
	'Arvo',
	'url(Arvo-BoldItalic.woff) \
		format ("woff")',
	{
		weight: "bold",
		style: "italic"
	}
);

arvo.loaded.then(()=>{
	document.body.classList.add("arvo-loaded");
});

The future

The Font Display Timeline

font block period (invisible fallback)
font swap period (loaded fallback)
font failure period (font stack)

From illuminated manuscripts…

illuminated manuscript

…to emoji

😀 😎 🤖 👨‍👩‍👧‍👦 👦🏻 👧🏻 👨🏻 👩🏻 👦🏼 👧🏼 👨🏼 👩🏼
👦🏽 👧🏽 👨🏽 👩🏽 👦🏾 👧🏾 👨🏾 👩🏾 👦🏿 👧🏿 👨🏿 👩🏿
🐱 🐶 🐌 🌎 🍕 🍲 🍫 🍻 ⚽️ 🏀 🏈 ⚾️
🌈 🏯 🗽 🚆 📱 🎉 🗓 💸 🇫 🇴 🇳 🇹
🇺🇸 🇧🇷 🇲🇹 🇸🇪 🇳🇬 🇰🇭 🇭🇷 🇮🇩 🇳🇿 🇪🇬 🇫🇮 🇨🇳

Painter Kafeel

TransType Editor

screenshot for demo

COLR + CPAL

COLR holds stack of TrueType outlines

CPAL holds color palette(s)

What's love got to do

Where did the styling go?

CSS4 font-palette: select from provided palettes

CSS4 @font-palette-values: override baked-in palettes

SVG (+ CPAL)

SVG holds SVG graphics

CPAL holds color palette(s)

CSS 4 @font-palette-values to alter palette

got to do with it

Painter Kaffeel

@font-palette-values autumnal {
    font-family: Painter Kafeel; base-palette: 2;            
	0: black;
	1: hsl(15, 75%, 34%);
	2: hsl(15, 80%, 70%);
	3: hsl(15, 75%, 53%);
	4: hsl(15, 75%, 40%);
	5: white;
	6: hsl(58, 15%, 56%);
	7: hsl(58, 15%, 65%);
	8: hsl(58, 15%, 46%);
	9: hsl(58, 15%, 30%); }

CSS4 font-synthesis: small-caps (disable fake small caps)

emoji, math, fangsong: New generic font families

Quick question

font-weight: 400;
font-weight: calc(9 * 100);

AaΑα 400

BbΒβ 900

CSS4 font-weight: a number from 1 to 999

Variable Font support: weight, width, slant, optical, custom

Dunbar variable font

three axes

@font-face {
    font-family: "Dunbar";
    src: "dunbar.otf";
    font-weight: 100 900;
    font-stretch: 50% 200%;
    font-style: -10deg 40deg;
}

h1 {
    font-weight: 234;
    font-stretch: 80%;
    font-style: oblique 24deg;
    font-optical-sizing: none;
}

/* Supported in Safari!! (TP 16+) */
font-variation-settings:"wght" 2.4, "wdth" .7, "radi" .4;

@keyframes expand {
    from { font-variation-settings: 'wght' .3 }
    to { font-variation-settings: 'wght' 3.1; }
}

peace

This may be the most significant development for design on the web since responsive design itself

—Jason Pamental

Image credits

Typography I/Helvetica: David Costa, cc-by-nc
Periodic Table of Font Elements 1.1: FontShop, cc-by
Speedometer: Zach Heller, cc-by
Crystal Ball: Shawn Perez, cc-by
Wooden type blocks at Fremont indoor Sunday market: Jonathon Colman, cc-by-nc-nd
Manuscript of Church Law: Unknown Miniaturist, English (active 1120s in Canterbury). Public domain.
“Lab” Variable font: David Jonathan Ross, "intended for fun and experimentation"
Normalised design space of a 3-axis variable font: John Hudson, using Kepler, a design by Robert Slimbach
peace demo: Erik van Blokland
Responsive variable font samples

WebFonts used

Arvo: Geometric slab serif with four faces (Roman, Italic, Roman Bold, Bold Italic) by Anton Koovit. Used here for headings.
Linux Libertine: OpenType serif font with many OpenType features: ligatures, small caps, oldstyle and tabular numeric variants, fractions, greek final forms, superiors & inferiors, contextual alternates. Used here for all the numeric feature demos.
Painter Kafeel: Commercial (50 USD). Set of ten fonts intended to be manually overlaid to produce lettering in the Indian hand-painted street signage style, by Painter Kafeel and sold by Handpainted Type. Used here as input to produce COLR and SVG demo chromatic fonts. (Because this is a commercially licensed font, I could use it personally but not put the font into the GitHub repo).
Rochester Regular: Formal, flowing handwriting script, by Sideshow. Used here for the ampersand, and the WebFonts logo.
MEgalopolis Extra: OpenType display font with a single, bold, weight by SMeltery. Has many OpenType features such as discretionary ligatures, contextual forms, swash forms, numerical alternates, and a range of stylistic sets. Used here to demonstrate common and discretionary ligatures.
Reenie Beanie: Informal handwriting script, by James Grieshaber. Used here for comments and other annotations.
EmojiOne: SVG-in-OT emoji font by Brad Erickson. CC-BY-4.0 Includes skin colour modifiers, circled letters, flags.
Multicolore: SVG-in-OT conversion by Xerographer fonts of Illustrator concept font by Ivan Filipov. CC-BY-SA 4.0.