Opening Silos in Big Brilliant Corporations Part 2

Ok, but why is this important?

Arial Gill Sans Georgia Curious Helvetica Verdana

“So, you want to load a custom font?” The Engineers

@font-face { font-family: "MySuperCoolFont"; src: url("/static/font.woff2"); } body { font-family:
"MySuperCoolFont", Sans; }

The End Engineer Product Owner

Not quite…

1. Caching

src: url(“/gel/static/font.woff2"); src: url(“/gel/static/font.woff2"); src: url(“/news/static/font.woff2"); src: url(“/news/static/font.woff2"); src: url(“/sport/static/font.woff2");
src: url(“/sport/static/font.woff2"); src: url(“/iwonder/static/font.woff2"); src: url(“/iwonder/static/font.woff2"); src: url(“/cbbc/static/font.woff2"); src: url(“/cbbc/static/font.woff2"); src: url(“/weather/static/font.woff2"); src: url(“/weather/static/font.woff2"); src: url(“/music/static/font.woff2"); src: url(“/music/static/font.woff2"); src: url(“/cbeebies/static/font.woff2"); src: url(“/cbeebies/static/font.woff2"); src: url(“/earth/static/font.woff2"); src: url(“/earth/static/font.woff2"); src: url(“/food/static/font.woff2"); src: url(“/food/static/font.woff2");

Reith Sans Reith Sans Reith Sans Reith Sans

2. Weight

Reith Sans Regular Reith Sans Medium Reith Sans Light Reith
Sans Bold Reith Sans Extra Bold Reith Sans Regular Italic Reith Sans Medium Italic Reith Sans Light Italic Reith Sans Bold Italic Reith Sans Extra Bold Italic Reith Serif Regular Reith Serif Medium Reith Serif Light Reith Serif Bold Reith Serif Extra Bold Reith Serif Regular Italic Reith Serif Medium Italic Reith Serif Light Italic Reith Serif Bold Italic Reith Serif Extra Bold Italic

20 Font Files at ~50KB each

40 Font Files at ~50KB each

Other 20kB Images 1818kB HTML 53kB Stylesheets 90kB Scripts 459kB
Fonts 113kB Video 819kB Average Bytes per Page Total: 3.4MB Source: httpdarchive.org

Cache: Set Max Age to at least 1 year Compress:
use WOFF and/or WOFF2. Only load what you need

@font-face { font-family: "MySuperCoolFont"; src: url("/static/font.woff2"); } page.html style.css <body>
<div> <h1>My Super Cool Website</h1> </div> </body>

@font-face { font-family: "MySuperCoolFont"; src: url("/static/font.woff2"); } .cool-font { font-family:
"MySuperCoolFont", Sans; } page.html style.css <body class="cool-font"> <div> <h1>My Super Cool Website</h1> </div> </body>

3. Performance

FOIT Flash Of Invisible Text

document stylesheet.css Readable Paint font.woff time Very Approximate Timeline Of
Page Load Final Paint

Flash Of Unstyled Text with Class

FOUT with Class

This is some text.

This is some text

This is some text.

if (document.documentElement.className.indexOf('cool-font')!=-1) { var coolFont = new FontFaceObserver('MySuperCoolFont'); coolFont.load() .then(()
=>{ document.documentElement.className += " cool-font-loaded"; }) .catch((e) =>{ console.log('Failed to load super cool font'); }) }

<html class="cool-font"> <body> <div> <h1>Welcome to my super cool website</h1>
</div> </body> </html> page.html style.css @font-face { font-family: "MySuperCoolFont"; src: url("/static/font.woff2"); } html { font-family: Arial, sans; } html.cool-font-loaded { font-family: “MySuperCoolFont", Arial, Sans; }

<html class="cool-font cool-font-loaded"> <body> <div> <h1>Welcome to my super cool
website</h1> </div> </body> </html> page.html @font-face { font-family: "MySuperCoolFont"; src: url("/static/font.woff2"); } html { font-family: Arial, sans; } html.cool-font-loaded { font-family: “MySuperCoolFont", Arial, Sans; } style.css

document stylesheet.css Readable Paint font.woff time Very Approximate Timeline Of
Page Load Final Paint

4. Things we couldn’t use

1. Cache 2. Weight 3. Performance 4. Things we couldn’t
use Custom Web Fonts

Working Across Silos

Useful Links: •Google Web Font Optimisation •Zach Leat’s Comprehensive Guide
To Font Loading Strategies •Blog about BBC Reith Font

The End

bbc.co.uk/gel @BBCGEL @tsoukn @joehart

Opening Silos in Big Brilliant Corporations Part 2

Opening Silos in Big Brilliant Corporations Part 2

More Decks by Frontend NE

Other Decks in Technology

Featured

Transcript