Page speed: Font Optimization

When checking for Network tab in Developer Tool, I find out that the fonts of my project taking too much time to load. So my first idea is reducing the loading time here.

Solution 1: Local Font Files

This project is using custom fonts from Adobe Typekit. So at the first check, I think that with a slow connection, maybe it’s better when I store all the font files on our server.

So I ask for my team for changing the way we use fonts, explain that Typekit is slowing down the site speed.

But there are some disadvantages of this solution which I think it won’t help the speed score:

  • Storing fonts on our server requires all assets will be load from our server. It means the server need to handle and response too much files (and can reduce server performance).
  • The files using for local fonts are not working. The text display is different from the original from demo of Typekit (so I think it’s illegal).
  • Local font files are too big (it’s about 18MB) which I can’t optimize.

So, this solution won’t work.

Solution 2: Using Javascript

As a back-end developer, I won’t need to care about front-end stuffs like how they use Adobe Typekit font, how to import them to our website… But at this time, I think it’s good to know how it work so maybe I can try with a better solution.

As I see, each Typekit Web Project has a ID and they has a official instruction by using @import their CSS file. I decided to turn it on using their CSS code @font-face in this CSS file before but it seems that the speed doesn’t improve.

Typekit has supported some embed code that uses to import fonts to web project (that I didn’t know before). This link save me: https://helpx.adobe.com/fonts/using/embed-codes.html

I’ve tried to use Javascript to load Typekit font as suggested. So my code will change from:

@font-face {
    font-family:"proxima-nova";
    src: url("[Typekit_URL]") format("woff2"),
         url("[Typekit_URL]") format("woff"),
         url("[Typekit_URL]") format("opentype");
         font-display:auto;font-style:normal;font-weight:700;
}

to

<script src="//use.typekit.net/xxxxxxx.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

After clearing cache, I do see that the speed is increasing (from about 38 on mobile to about 55). It’s pretty help me in my case.

Conclusion

From the beginning, when we use custom third-party fonts like Adobe Typekit, I don’t think we can optimize them. (Actually, compare with Google Fonts, I don’t highly recommend Typekit for many reasons).

But after researching and finding more solutions, I think that the important thing is how we can adapt the fonts to the website. And as a back-end developer, I think it’s good to know about front-end stuffs. Maybe the front-end dev won’t think about the speed optimization when they do their task 😉