I recently had performance issues on Google Lighthouse due to the fonts used on the website. The Google Fonts I used were classified as a render-blocking resource.
The best way to remove this would have been to revert to a standard web safe font, but I wanted to stick with the Google Fonts. If you hit the same issue here are two ways to help reduce/remove the issue
Both seem to work well, if you’re using a lot of fonts/variations hosting them yourself may be the best option, as I was only using three weights of the same font, the first option worked well here.
By calling the fonts directly you skip the initial call to Google. This website uses three weights of Roboto Slab: 200, 400 and 700.
The code from Google to add the fonts looks like this:
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;400;700&display=swap" rel="stylesheet">
Instead of using the supplied <link> we can skip this call, take the contents, and call it directly
in our own CSS file or page <head>. Keep the fonts.gstatic.com preconnect link, this will help with
loading the fonts but the fonts.googleapis.com can be removed.
The resulting code will look something like this:
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<style>
/* latin-ext */
@font-face {
font-family: 'Roboto Slab';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(https://fonts.gstatic.com/s/robotoslab/v23/BngMUXZYTXPIvIBgJJSb6ufD5qW54A.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto Slab';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(https://fonts.gstatic.com/s/robotoslab/v23/BngMUXZYTXPIvIBgJJSb6ufN5qU.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Roboto Slab';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/robotoslab/v23/BngMUXZYTXPIvIBgJJSb6ufD5qW54A.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto Slab';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/robotoslab/v23/BngMUXZYTXPIvIBgJJSb6ufN5qU.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Roboto Slab';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/robotoslab/v23/BngMUXZYTXPIvIBgJJSb6ufD5qW54A.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto Slab';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/robotoslab/v23/BngMUXZYTXPIvIBgJJSb6ufN5qU.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
h1, h2, h3, h4, .subtitle, .intro, ul.nav li strong a, div.logo a strong, nav.mainmenu li a {
font-family: 'Roboto Slab', sans-serif;
}
</style>
I took the opportunity to remove Cyrillic, Greek and Vietnamese language packs which were automatically included and kept just the Latin and Latin Extended options.
Another option is to completely skip Google Fonts altogether by downloading the fonts and hosting them on your own website. These step by step instructions from Codeboosh will walk you through the process.
December 2024
In an era where digital privacy concerns are at the forefront of online discourse, many organisations are reassessing their tools to ensure compliance with data...
→ Continue reading"Simple Analytics: A privacy-focused alternative to Google Analytics"
November 2024
In today’s digital world, protecting your privacy online has become essential. With personal data constantly being shared, stored, and potentially accessed by unauthorised parties, safeguarding...
→ Continue reading"Simple steps to protect your privacy online"
November 2024
Making the most of Bluesky after coming from whatever Twitter (𝕏) has become involves exploring the platform's unique features, adapting to its smaller, community-driven culture,...
November 2024
With the increasing dependency on web applications in daily operations, securing these applications is paramount to safeguarding data and protecting against breaches. This blog post...
October 2024
Cookieless website tracking is a method of collecting analytics data and monitoring website behaviour without the need for traditional browser cookies. Traditionally, cookies have been...
→ Continue reading"Cookieless website tracking and analytics"
October 2024
The disagreement between WordPress and WP Engine has sparked considerable debate within the WordPress community and could have important implications for users of the WordPress...
→ Continue reading"What's going on between WordPress and WP Engine?"
