October 6th, 2019

Replying to a tweet from @ChrisFerdinandi

For clearleft.com the font-loading strategy is to self-host woff2 with link rel="preload" as="font" in the HTML and font-display: fallback in the CSS.

For adactio.com the font-loading strategy is to not use web fonts. 🙂

11:38am

51° N , 0° E

Also on Twitter

Reply Retweet Favourite

« Newer Older »

Responses

Chris Ferdinandi ⚓️

I tried the clearleft solution and it was causing FOIT after load. Does it require a polyfill for preload you prevent that?

Peter Müller

Are you sure you had font-display in there? Fallback or optional would be good values to try

Jason Pamental

Look at using fontfaceobserver- I’ve found that so far to be the best balance of speed and lack of unneeded repaints (looking at you Chrome)

Chris Ferdinandi ⚓️

I did that now. I’m seeing this on older, lower powered devices.

Chris Ferdinandi ⚓️

I’m using document.fonts.load() to add a class after the font loads. I shouldn’t be seeing what I’m seeing… hmm.

Peter Müller

Did you use font-display? developer.mozilla.org/en-US/docs/Web… I’d be happy to look at your page to see what can be done

6 Likes

# Liked by YannPicarddeMuller on Sunday, October 6th, 2019 at 12:53pm

# Liked by Lasha Krikheli on Sunday, October 6th, 2019 at 12:53pm

# Liked by Matt Bee on Sunday, October 6th, 2019 at 5:06pm

# Liked by Paul Watson 🇿🇦 🇮🇪 on Sunday, October 6th, 2019 at 6:16pm

# Liked by Wicked Rich of the Westenra on Monday, October 7th, 2019 at 7:33am

# Liked by Prashant Palikhe on Monday, October 7th, 2019 at 9:30pm