When it comes to web design, performance is a top priority. A website that loads quickly and efficiently not only improves the user experience but also positively impacts search engine rankings. One of the critical components of web design is fonts. Beautiful typography enhances the aesthetics of a website, but improperly loading fonts can slow down your site.
In this comprehensive guide, we will explore the crucial role of loading fonts efficiently, the impact of Google Fonts on website performance, and how to optimize Google Fonts in WordPress without relying on plugins. We will delve into techniques to ensure that your fonts load as fast as possible, contributing to an excellent user experience and improved site performance. Be ready to learn both loading fonts from Google as well as loading fonts locally.
Why Loading Fonts Efficiently Matters
The Importance of Above-the-Fold Content
When a user visits a website, the first thing they see is what’s called “above-the-fold” content. This is the portion of the web page that’s visible without scrolling. The above-the-fold content sets the initial impression, and it’s crucial for keeping users engaged. However, the speed at which this content loads is directly influenced by the elements within it, including fonts.
If your fonts are not loaded efficiently, the above-the-fold content may appear incomplete or slowly, leading to a poor user experience. Users today have little patience for slow-loading websites, and a delay of just a few seconds can lead to high bounce rates.
The Impact on Page Loading Speed
In addition to the initial load of above-the-fold content, inefficiently loading fonts can slow down the entire web page. Fonts can be large files, and if not handled correctly, they can significantly contribute to the page’s load time.
Google Fonts, a popular choice for web typography, is known for offering a vast selection of high-quality fonts. However, embedding fonts from external sources like Google Fonts can introduce performance issues. These external requests take time to load because the font files reside on Google’s servers, meaning they need to be fetched over the internet. This can add latency and slow down your website.
The easiest way to Load Google Fonts
The quickest and easiest way to add Google Fonts on you website is using the direct script that Google offers. The process is straightforward:
Get the fonts code from Google
- Visit https://fonts.google.com/
- Choose the font you prefer (we chose Manrope for this article)
- Press only the + button for the weights you are going to use. For instance, pick one weight for Light, one for Normal and one for Bold font. For the test, we picked 300, 500 and 900 respectively.
- Then copy the script that is automatically created for you on the right part of the screen:
- Note down the CSS rules below the font code. In our case it’s font-family: ‘Manrope’, sans-serif;. We are going to need it later.
Adding the Google Font code in functions.php
Next step is to add the previously obtained code inside functions.php of our child theme (you use a child theme, right?). We need to add it as high as possible in our <head></head> section. In order to do that, we are going to use wp_head hook and add a very low priority so that the codes load first. Here’s the snippet:
<?php //do not copy this line
function load_google_fonts_wpr(){
?>
<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=Manrope:wght@300;500;800&display=swap" rel="stylesheet">
<?php
}
add_action('wp_head','load_google_fonts_wpr',-10);Adding the CSS to apply the font in your WordPress
Our last step is to add the CSS in our stylesheet. You can either add the below code in your end of child theme’s style.css or in the end of your Theme Customizer – Custom CSS. Make sure you add it in the end of the files, otherwise you will not overwrite your theme’s hardcoded default font:
/* adding it to body class should do the trick */
body{
font-family:'Manrope', sans-serif;
}
/* use this if titles are further specified */
h1,h2,h3,h4,h5,h6{
font-family:'Manrope', sans-serif;
}
/* use this if more tags are further specified */
p,span,input,textarea,sup,li,a{
font-family:'Manrope', sans-serif;
}
After adding the above CSS, your WordPress website should now be using the new font! Congratulations! Although for those brave enough to seek better performance no matter the effort, we can optimize Google Fonts loading by serving them locally.
Host Google Fonts locally for better performance
One of the most effective methods to optimize Google Fonts for performance in WordPress is to load them locally from your own server. By doing so, you eliminate the need for external requests to Google’s servers, reducing latency and speeding up font delivery.
Here’s how you can load Google Fonts locally:
- Choose the Fonts You Need: Grab the link from the fonts.googleapis.com domain with your selected font. In our case, it;s https://fonts.googleapis.com/css2?family=Manrope:wght@300;500;800&display=swap
- Explore Font languages: Visit the URL and explore the raw Google fonts file. It should look like this:
- Select your languages: Now we have a tricky part. Depending on your language, choose only the preferred version that suits your needs. In our case, we only want latin.
/* latin */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggexSg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggexSg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/manrope/v15/xn7gYHE41ni1AdIRggexSg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } - Download the Font Files: Visit the src: url(…gexSg.woff2) URLS from the font-face of your selected languages.
- Upload Font Files to Your Server: Access your WordPress site files on your web server using an FTP client or file manager in your hosting control panel. Create a directory within your theme folder to store the font files, such as “fonts.”
- Implement Font-Face in Your WordPress: One mistake everyone does here is that they add the code in the stylesheet. We can gain a little extra benefit if we add the code inline, as high as possible in our <head> tag. That means we are going to use the same code we used in Loading Google Fonts externally, using the wp_head hook. Only this time, we are going to alter it by adding the <style> tag and changing the URL of the <link> and URLs in the CSS code:
<?php //do not copy this line function load_google_fonts_wpr(){ ?> <link rel="preconnect" href="https://www.yourwebsite.com" crossorigin> <link href="https:///www.yourwebsite.com/wp-content/uploads/fonts/xn7gYHE41ni1AdIRggexSg.woff2" rel="stylesheet"> <style>/* latin */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url(https:///www.yourwebsite.com/wp-content/uploads/fonts/xn7gYHE41ni1AdIRggexSg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(https:///www.yourwebsite.com/wp-content/uploads/fonts/xn7gYHE41ni1AdIRggexSg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300; font-display: swap; src: url(https:///www.yourwebsite.com/wp-content/uploads/fonts/xn7gYHE41ni1AdIRggexSg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } </style> <?php } add_action('wp_head','load_google_fonts_wpr',-10);You can minify the CSS inside the
<style></style>tags, we just left it unoptimized for presentation purposes.
- Reference the Font in Your Styles: Our last step is to add the CSS in our stylesheet, exactly the same way we did with external loading of Google Fonts. Feel free to add the below code in your end of child theme’s style.css or in the end of your Theme Customizer – Custom CSS. Don’t forget to add it in the end of the files, otherwise you will not overwrite your theme’s default fonts:
/* adding it to body class */ body{ font-family:'Manrope', sans-serif; } /* use this if titles are hardcoded */ h1,h2,h3,h4,h5,h6{ font-family:'Manrope', sans-serif; } /* use this if more tags are hardcoded */ p,span,input,textarea,sup,li,a{ font-family:'Manrope', sans-serif; }After adding the above CSS, your WordPress website should now be loading Google Fonts locally. That’s it, you have successfully completed the process!
Optimize Google fonts on your WordPress!
Optimizing the loading of Google Fonts for your WordPress website is a crucial step in ensuring a fast and efficient user experience. By understanding the importance of efficient font loading, you can make informed choices that align with your website’s performance goals. Whether you choose to load fonts from Google’s servers or host them locally, it’s essential to strike a balance between design and speed.
Loading fonts locally offers the advantage of reduced latency and better control over font delivery. While it may involve some manual setup and maintenance, the performance benefits make it a worthwhile endeavor. On the other hand, Google’s servers provide a convenient way to access a wide range of fonts with minimal setup, but it may not be as fast as local hosting.
Ultimately, the choice of whether to load Google Fonts from an external source or host them locally depends on your specific needs and priorities. By following the best practices outlined in this article and considering the trade-offs, you can optimize font loading for your WordPress website and provide an exceptional browsing experience for your visitors. Remember that every website is unique, so it’s essential to test and fine-tune your font-loading strategy to achieve the best results.