Reducing Web Font Loading Frictions
Feb 4, 2020
<style>
@font-face {
src: url(http://my-custom/font.ttf);
font-family: custom-font;
}
div {
font-family: custom-font;
}
<style>
<div>Text rendered with a web font.</div>
Doesn’t trigger loading
Triggers loading
Web Font Loading Timeline
Style
Layout
Paint
...
...
Start font loading
End font loading
Invalidations
Style
Layout
Paint
...
...
Frictions: Latency & Unstable Layout
Style
Layout
Paint
...
...
Start
End
Invalidations
Style
Layout
Paint
...
...
10ms (e.g., from disk cache)
100ms
100ms
“If there's a high probability that your page will need a specific Webfont hosted at a URL you know in advance, you can take advantage of a new web platform feature: <link rel="preload">.”
-- Google Web Fundamentals
Race Condition: Loading vs Rendering
Start
End
Invalidations
Style
Layout
Paint
...
...
Preloading
Style
Layout
Paint
...
...
Solution to Race Condition
Start
End
Invalidations
Style
Layout
Paint
...
...
Preloading
Solution to Racing (details)
WIP: crrev.com/c/2006626
‘font-display: optional’
@font-face {
src: url(http://my-custom/font.ttf);
font-family: custom-font;
font-display: optional;
}
Intention: if the font is not “immediately” available, don’t use it
Reality: allows unstable layout
How ‘font-display: optional’ works currently
starts font loading
“block period” timeout
loads
doesn’t load
ignored if loads after
Solution to Unstable Layout
Resolved on CSSWG meeting on Jan 24:
“... change normative text for font-display optional to say that the font should never change rendering of the page ...”
Implementation change:
If an ‘optional’ font is not already available in the first rendering, it’s ignored
WIP: crrev.com/c/2006626
Invalidations after web font loading
crbug.com/441925: Fonts loading cause full document style recalc
Optimizations
Stage 1: Partial style recalc
Element style:
Element style:
loads
Stage 1: Partial style recalc
WIP: crrev.com/c/1952189
5% improvement on Cluster Telemetry
Stage 2: Partial relayout
Rough idea only atm
Invalidate only those that may need a relayout/reshape after a font is loaded