Sign in
Log inSign up
David Ojeda

96 likes

6.2K reads

18 comments

Kobi Kobsen
Kobi Kobsen
Oct 1, 2020

Nice, but I麓d make an SVG if it is only for some letters.

2
1 reply
David Ojeda
David Ojeda
Author
Oct 1, 2020

That can work too!

Tapas Adhikary
Tapas Adhikary
Oct 1, 2020

David Ojeda, This is a great tip. Thanks for the write-up.

1
1 reply
David Ojeda
David Ojeda
Author
Oct 1, 2020

Thanks to you for the Bootcamp session, Tapas!

1
Sandeep Panda Test
Sandeep Panda Test
Oct 1, 2020

Wow! Awesome tip. Added to my TIL. 馃檶

1
1 reply
David Ojeda
David Ojeda
Author
Oct 1, 2020

Thanks! Glad you learned something with my post 馃檶馃徏

Julian Wagner
Julian Wagner
Oct 1, 2020

Lovely. I want to add that you can do the same thing with fonts you have bought somewhere else with a free tool like fontforge. I recommend this to everyone who has a high-traffic landing page. It鈥檚 pure money!

1
1 reply
David Ojeda
David Ojeda
Author
Oct 1, 2020

Thanks for the extra tip!

Damien Guard
Damien Guard
Oct 1, 2020

For popular fonts this will likely be slower and use more network access.

If they have already visited a site that uses the font you use by putting ?text= on the end you're forcing the browser to go off to Google to get your subset even though the full font file is sitting their in their browsers disk cache.

1
7 replies
NostraDavid
NostraDavid
Oct 1, 2020

This is outdated wisdom, due to security issues:

chromestatus.com/feature/5730772021411840 bugzilla.mozilla.org/show_bug.cgi?id=1536058 bugs.webkit.org/show_bug.cgi?id=110269

Using the advice in the article is just fine.

1
Damien Guard
Damien Guard
Oct 1, 2020

NostraDavid Indeed, looks like they went ahead and chose sidechannel leaking privacy over perf. If you follow a lot of the discussions they claim there's little to no perf benefit from using caches.

I wonder how many of their tests and experiences were on fat company pipes and gigabit home internet connections... :(

1
David Ojeda
David Ojeda
Author
Oct 1, 2020

Thanks to both of you for the discussion!

So, cache works or don't? 馃

Developer Console network tab with size column highlighted showing files served from cache

NostraDavid
NostraDavid
Oct 1, 2020

David Ojeda From what I understand: Cache works, but if I go to example.com and load a woff font, I will have to redownload it for your site (doesn't matter if the URL is the same).

1
Damien Guard
Damien Guard
Oct 1, 2020

David Ojeda The cache is no longer shared between origins so there is literally no benefit to serving up from googlewebfonts, bootstrapcdn etc. any more.

If you have your own private CDN like Amazon CloudFront you may as well just copy the assets there now and be in full control.

1
David Ojeda
David Ojeda
Author
Oct 1, 2020

NostraDavid Understood!

David Ojeda
David Ojeda
Author
Oct 1, 2020

Damien Guard Got it. Good to know!

Kishore
Kishore
Oct 1, 2020

This is one of the best hack I read.

1
Shannon Crabill
Shannon Crabill
Oct 3, 2020

I was just picking out custom fonts for a project. I'll try this update next time I'm working on it.

1