Improving Performance with Google Fonts

Google Fonts are a wonderful free resource that can bring a little extra delight to the design of your site. One of the things that I like about Google Fonts is that it gives you an indication about how much slower your site mgiht be as a result of including the different fonts onto your site. As you can see below, we’ve got a Load Time: Moderate based on these 5 fonts. Then if I add more weights to those Fonts we move on to Load Time: Slow — you never want to see slow… you want to keep it fast! .inline-perf { font-family: ‘Faster One’, cursive; font-size: 3.2em; } Let’s say that you pick a particularly heavy Google Font which you only want to use for the heading of your site, let’s say it’s the title of a site about performance like below Perf Well, we can then add the &text= parameter onto our link declaration and include just those characters… so instead of just having <link href=”https://fonts.googleapis.com/css?family=Faster+One&display=swap” rel=”stylesheet”> we include…. <link href=”https://fonts.googleapis.com/css?family=Faster+One&display=swap&text=Perf” rel=”stylesheet”> Google estimate that this will reduce the request size by up to 90% which is awesome, and also gives your designers potentially a little more leway to add another Font without impacting performance.

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.