[rank_math_breadcrumb]

Load Fonts Fast

At Buffer, we’re constantly experimenting with ways we can improve our products and try out new ideas. We recently launched Start Page, a beautiful, flexible, mobile-friendly landing page that you can build in minutes and update in seconds. As a Software Engineer on Buffer’s team I’ve tackled a long list of fun projects, including Start Page. One thing I love about this project, is that as we foray deeper and deeper into user-generated content and customization, we’re discovering new engineering challenges that we haven’t had in our frontends before. In this case, we wanted to introduce 13 new font options (for a total of 16 fonts) and we wanted to make sure that they loaded nice and quickly. As I worked on this, I learned so much I didn’t know about fonts so in this post I want to share more about how we went about this for anyone facing similar challenges.

A screen capture of the Start Page app, demonstrating the new font picker functionality

Fonts are render-blocking

Let’s start with the ‘why’. Fonts are generally pretty light resources, which are usually cached in browser so why is it important to ensure a quick loading strategy? Because fonts are high-priority, synchronous requests which means they’re render-blocking. If we can load fonts quickly and/or asynchronously, we can improve site speed.

FOUT and FOIT

Ok, so you don’t want to block your rendering, there are generally two strategies to chose from to handle text loaded before it’s custom font:

FOUT – Flash Of Unstyled Text
Renders the text but with a fallback font. Google Fonts can now return with display=swap which instructs the browser to use the fallback font to display the text until the custom font has fully downloaded. If you want to be meticulous, you can find a better fallback font using this app: Font Style Matcher

FOIT – Flash Of Invisible Text
Here, the text is rendered with an invisible font until the custom font has fully downloaded. This one makes more sense to use for something like a logo where the brand would be affected if rendered with a fallback font (although for a logo I’d use an SVG but examples!)

THE trick for fast fonts

The general advice nowadays is to preconnect to the font server:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com" />

then preload the fonts:

  <link
      rel="preload"
      as="style"
      href="https://fonts.googleapis.com/css2?family={your font families here}&display=swap"
    />

Finally as a fallback, request the fonts async by setting media to “print” for browsers which don’t support rel="preload" (about 12% of browsers in this the year 2021)

<link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family={your font families here}&display=swap"
      media="print"
      onload="this.media='all'"
    />

This works because a regular stylesheet is render-blocking but a print stylesheet is assigned idle priority. After it’s loaded, the link’s media is applied to all.

Hosting your own fonts is the fastest but Google Fonts does a lot for you:

  • Returns multiple alphabets
  • Returns a css file customized to the user agent that requested it
  • When you have multiple fonts, it’s best to make 1 request so it’s quicker
  • You can tailor your requests to target specific font-weights and formats (bold, italic, thin)

Font Loading API

There’s a new-ish CSS Font Loading API that can request fonts on demand but I found that this doesn’t play nice with Google Fonts because you need the source URL for the fonts and the Google Fonts URL that you get isn’t the source, it’s the request. Google, along with Typekit, does have a library called Web Font Loader, that works like the Font Loading API but plays better with Google Fonts.

So what did we do in Start Page?

We implemented the popular strategy for the builder (the app itself) and while we do have some FOUT on first load ever (remember browser caching!) it’s very minimal, if seen at all. For generated pages, we get the fonts used in the theme before generating the HTML so we can inject only the fonts we need. This makes our generated pages much faster and lighter.We’re excited to see how this experiment will play out and if folks are keen to get more font options. If that’s the case, we might very well look into a more dynamic strategy (like loading only the currently used fonts on load and then sending another request if a user clicks on Appearance to change their fonts). Another option we could look into is implementing a way for requesting multiple fonts if we hosted them ourselves.

That’s it for now! Thanks for making it this far, I hope this was interesting for you! Know anything neat about fonts that I didn’t mention here? Share it with us on Twitter.

Resources:
The Fastest Google Fonts
Loading Google Fonts and any other web fonts as fast as possible in early 2021
FOIT vs FOUT: a comparison on web font loading
CSS Tricks – font-display

RECOMMENDED POSTS

Find Out More

Marketing Tips You Need

Keep In Touch

Quick Subscribe

Client Reviews Tell The Tale.

If you are looking for professional video production for your business, Dan and his team at Appture are the best.John CullensDecember 29, 2022
We used Appture to build a lodging website, and they were awesome! Dan went above and beyond to show us the functions and make all of our changes. Appture is our go to for web design from now on!Abigail HaleOctober 26, 2022
Dan did a fantastic job making me feel comfortable while shooting. He also made me look great! I don't photograph well, so I am very pleased with the results and speed at which I got the final product.Lily GostinSeptember 13, 2022
Appture knows their business and will go the extra mile for their customers. They do high quality work and provide great ongoing support.Chris McCorkindaleMay 24, 2022
Anita CauthornMay 24, 2022
It’s so rare in these times to find one man with so much wow factor and more rare to find men with similar interest and passion in their life journey as myself . Dan Elliott has been introduced to many in what is now considered as the Terror Dome , a place where many dreams are not deferred they are detoured to routes that lead to dead ends , he comes in full of optimism so infectious that he, maybe with out knowing is energizing those who have ventured where others would fear going with just the right jolt to forge on in the way of helping fallen humanity … His various fields of expertise has helped many in my region and I can only imagine the number he has effected beyond those I know … from day one I knew “ this was a man of kindred spirit “ Dan Elliott is a Gem and adds glimmer to things he touches … I’m a Witness ….and eternally grateful….L.Rashaan RichMay 21, 2022
Dan and his group are highly capable and knowledgeable. They work fast and get the job done. I highly recommend Appture.Justin FrankMarch 26, 2022
They are highly specialized in their work and constantly seek innovation.Ismail YenigulMarch 14, 2022
Dan is a marketing wizard. Honest, Experienced and a read deal. I am blessed to have him in my journey online :) Highly recommended.Sabbir HasanMarch 7, 2022
Incredible talent so much experience and always innovativeAppture SoftwareAugust 10, 2021
So much to say. Creative, Intelligent, Talented, Limitless, Affordable. It's amazing what these guys can do.Hack mackMay 17, 2019
We found Appture from their website, and immediately started work on a website, custom SMS marketing and social media. We got leads the FIRST DAY! And it keeps getting better and better.HawkDFW SecurityMay 17, 2019
We'd used some other agencies before, but man, they simply knocked us all over. After being in business for 30 years, I wonder how much more business we'd be doing if we'd hired them earlier.Rebecca HoneaMay 17, 2019
Hide picture