How do I use google fonts on my site without compromising the page speed of the site

Question

I use Google fonts and my site\'s typography. Looks great but it adds a great overhead. Is there a way I can still get the same look and feel for my website without compromisin

Answer 1

Yes you can.

1. download your google web font files
2. upload them to font squirrel web generator
3. select Expert settings and tick: Base64 CSS.
4. when loading the font through base64, you are not waiting for an external http call to finish.
5. this will remove the Flash Of Unstyled Content (FOUC)

Reference: https://robert.accettura.com/blog/2009/07/03/optimizing-font-face-for-performance/ and you can look up online many other articles. I've also tried it on my website, and it works.

Answer 2

Short answer: no. Slightly longer answer: no, you can try but it is highly unlikely that you will beat what Google WebFonts provides to you already. Now let's dissect the problem a bit more...

First off, you must have a fairly light page if adding a single external resource (webfont) is having such a negative impact on your PageSpeed score -- arguably, we should fix that on the PageSpeed side. Now, back to webfonts!

Ground zero: adding any external resource to your page will have a negative impact on the overall performance of your page. With webfonts, this can be an even larger problem because CSS is considered a "critical resource" which will hold up rendering until the font arrives - if we were to skip this step, then the user might get a "flash of unstyled content" (FOUC), where the page is rendered with one font, and then restyled when the font arrives. This is a jarring experience - you definitely don't want this.

Step two: Using a webfont means we must include an external CSS file - in this case, served by Google servers. These servers are heavily optimized for low latency, but at the same time, there is no magic here - it'll still take some time!

Step 3: What's inside the CSS file? This is where a lot of people criticize Google WebFonts.. The stylesheet provides url() references to the webfont files. Why not base64 / inline the font? Well, Google WebFonts are rendered across billions of pages every day, so we chose to use URLs specifically because the font is very likely to be in your browser's cache. If you're refreshing your page with a cold cache (as you should) to test first page load, then you will always fetch the font.. but that's not the experience we're optimizing for.

Further, why not just inline the font into your page? Well, each platform has different file formats it accepts (woff, eot, ttf, etc), and Google WebFonts dynamically serves the most optimized format based on your current platform. If you simply download the WebFont (ex, woff), and inline it, then it may work well for you, but not for your visitors on different platforms. Additionally, the compression behind these fonts is always being improved - if you stick with the Google servers, you'll automatically inherit these improvements. If you roll your own, then you're stuck.

In a nutshell: if you want to roll your own, then make sure you optimize the fonts for each platform, serve conditional fonts based on platform, and keep up with the compression improvements over time. If you can do all of that, then you may do better than what's provided. :-)

---

Last but not least. Do not be afraid to use webfonts. Yes, they add additional time, but presentation matters also. It's your call. If the imposed latency is unacceptable, then stick with the default fonts. But trying to beat what Google WebFonts infrastructure / CDN is unlikely to get you very far.

P.S. One last tip: make sure you actually use all the weights and font-faces you include. Many people select entire families (just in case), and end up not using them at all, which on some browsers leads to unnecessary downloads.