{"id":811807,"date":"2022-01-09T12:00:39","date_gmt":"2022-01-09T12:00:39","guid":{"rendered":"https:\/\/www.lafactory.com\/blog\/non-classifiee\/5-tips-for-optimizing-performance-when-using-google-fonts-with-wordpress\/"},"modified":"2022-01-09T12:00:39","modified_gmt":"2022-01-09T12:00:39","slug":"5-tips-for-optimizing-performance-when-using-google-fonts-with-wordpress","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/en\/5-tips-for-optimizing-performance-when-using-google-fonts-with-wordpress\/","title":{"rendered":"5 Tips for Optimizing Performance When Using Google Fonts with WordPress"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n

Great typography on a website can have a positive impact on conversions. Choosing the right fonts and optimizing them is crucial. Google Fonts is a highly popular service, as they are well-designed and can add an extra level of elegance to default websites. Unfortunately, like anything else on the web, they can harm your site\u2019s performance if not used properly. In this article, we\u2019ll look at 5 tips for optimizing performance when using Google Fonts with WordPress.<\/p>\n

Google Fonts and WordPress Site Performance<\/h2>\n

\"Google<\/p>\n

Google Fonts<\/a> is a directory of over 1300 free font families provided by Google that anyone can use on their websites or printed projects. Even though they\u2019re used on millions of WordPress websites, they\u2019re a great way to enhance a website\u2019s design. You will surely be able to find a unique design among them. Google Fonts are usually added to a WordPress website by pulling them from Google\u2019s CDN. This means they\u2019re hosted on servers that are the closest to the user, including both the font and the stylesheet.<\/p>\n

Google Fonts pulled from the web aren\u2019t as fast as system fonts (those installed on your computer). Web traffic outside of your website becomes part of the loading speed. Google Fonts loading time has a smaller impact on your website performance than larger files. Fonts are much smaller than images, after all. However, every request your site makes is time spent when the user can\u2019t access it. Therefore, optimizing your Google Fonts is worth doing to improve your site\u2019s loading speed.<\/p>\n

Fortunately, there are several ways to optimize your performance when using Google Fonts with WordPress.<\/p>\n

1. Use Fewer Fonts<\/h2>\n

\"Use<\/p>\n

It\u2019s best to use as few fonts as possible. Ideally, you\u2019d use two sets of fonts that are paired for the best results.<\/p>\n

When we talk about fonts, we\u2019re actually talking about font families. We often think of the primary font when we\u2019re talking about a font type, but fonts include many variations such as multiple weights, italics, numbers, and symbols. These are known as glyphs.<\/p>\n

\"Use<\/p>\n

Many fonts include weights such as thin, light, medium, semi-bold, bold, ultra-bold, and more. Each of these is a different font within the font family. Also, each weight includes an italic, which doubles the number of fonts. When you use that font family, you\u2019re also loading all of its variations. That\u2019s a lot when you get down to it.<\/p>\n

For example, Roboto is a popular font for sites these days. The family has 12 sets of fonts with 282 glyphs per font. That\u2019s 3,384 glyphs<\/strong> for one font family times the number of font extensions you want to use. Add to that Roboto Condensed and Roboto Slab, and it\u2019s easy to see how the number of fonts used on a website can become astronomical. When you use multiple font families, you could be using tens of thousands of fonts.<\/p>\n

2. Host Google Fonts on your WordPress Server<\/h2>\n

\"Host<\/p>\n

It\u2019s possible to download and host the Google Fonts on your WordPress server. That way the site\u2019s typography will be delivered to the user from the same location as the website. The website will not have to request the font files from somewhere else, and the page will load faster for the user.<\/p>\n

When you select a font on the Google Fonts website, you\u2019ll see a download option. Download the font family and then upload them via FTP<\/a> to your content\/uploads folder. To use them, don\u2019t reference the third-party font host in the area of your pages. Instead, reference your URL\/fonts\/FONT_FILE_NAME.file-extension in your stylesheet.<\/p>\n

With all of this in mind, only load the fonts and weights you need<\/strong>. Don\u2019t use every possible weight and italic option. Use TTF, EOT, WOFF, and WOFF2 formats for each font.<\/p>\n

3. Preload the Google Fonts<\/h2>\n

Google Fonts are typically pulled from Google\u2019s CDN. Admittedly, this is a fast server, but fonts are usually pulled late in the loading process of a website.<\/p>\n

If there\u2019s a connection issue and the fonts aren\u2019t downloaded, the page will render using generic system fonts. Then, once the fonts have been downloaded, the page will re-render. In plainer terms, the page loads with one font, and then changes to another font. This is known as a flash of unstyled text (FOUT)<\/a>. This is preferred to waiting. But it\u2019s still not great.<\/p>\n

One way to solve this is to preload the fonts. Preloading Google Fonts also reduces the loading time by around 100ms. The reason for this is DNS, TCP, and TLS load in parallel with the Google Fonts CSS file.<\/p>\n

Preloading requires you to pre-connect and use a preload link in the stylesheet. You\u2019d load the font\u2019s family and stylesheet with HTML to the area of your website.<\/p>\n

Here\u2019s an example of the HTML using preconnect from CDN Planet<\/a>:<\/p>\n

<head>
\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>
\n<link rel=\"preload\" as=\"style\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Open+Sans|Roboto:[email\u00a0protected]<\/a>&display=swap\">
\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Open+Sans|Roboto:[email\u00a0protected]<\/a>&display=swap\">
\n<\/head>
\n<\/pre>\n
Replace Roboto<\/em> in the example above, as well as all the font options with the fonts and options you want to use.<\/p>\n
4. Optimize Google Fonts with a WordPress Plugin<\/h2>\n
\"Optimize<\/p>\n
As with most things regarding WordPress, plugins make it much easier to optimize Google Fonts. They handle the software side of things for you, so you don\u2019t have to worry about where to put the code.<\/p>\n
There are lots of good plugins that can optimize your Google Fonts. One that I find particularly interesting is OMGF | Host Google Fonts Locally<\/a>. It\u2019s designed specifically to optimize the Google Fonts you\u2019re already using. Like many other Google Fonts plugins, this one has both a free and a premium version. The free version only includes manual settings, which can be tricky. But they\u2019re not too complicated to set up.<\/p>\n
The main thing that stands out about this one is that the free version includes some optimizations that anyone can take advantage of, rather than simply facilitating the use of the fonts themselves. Most plugins like this only provide optimization through the premium version. For the best results, though, I recommend the premium version. The free version does have enough optimizations to get you started.<\/p>\n
\"Optimize<\/p>\n
The plugin caches the fonts, and you can host the Google Fonts locally. Enqueued fonts are automatically removed from the header and replaced with local fonts. You can preload fonts that are above the fold and keep them from loading certain fonts and stylesheets.<\/p>\n
\"Optimize<\/p>\n
You can replace or remove fonts in the Detection Settings. This can be especially useful after a redesign so that you\u2019re not loading old resources that will never be delivered to your users.<\/p>\n
\"Optimize<\/p>\n
And if you keep a really clean house, the Advanced Settings allow you to select the directory for the fonts cache.<\/p>\n
5. Use Google Fonts Integration with Divi Modules<\/h2>\n
\"Use<\/p>\n
600 Google Fonts are integrated into all Divi modules that use text and are available in both the Divi theme and the Divi plugin<\/a> and optimized for the best performance and design possible. Choose the font family, weight, and style, and customize their size, color, line height, line spacing, and shadows for body and all heading sizes individually. You can even adjust them for individual devices.<\/p>\n
Google Fonts are cached and only the fonts used are loaded into the module. This keeps the browser from loading font variations that are not needed.<\/p>\n
\"Use<\/p>\n
There are a couple of Google Fonts settings in the Divi Theme Options, in the General<\/strong> > Performance<\/strong> tab. Both are enabled by default. Meaning that if you are a Divi user and didn\u2019t know this was something the theme handles, you\u2019re already taken care of.<\/p>\n
Improve Google Fonts Loading<\/strong> caches the Google Fonts and loads them inline to improve page loading time and reduce render-blocking requests. Below that is\u00a0an option called Limit Google Fonts Support For Legacy Browsers<\/strong>. This feature reduces the size of Google Fonts to improve load times. The drawback is that Google Fonts support is limited in some older browsers.<\/p>\n
Ending Thoughts<\/h2>\n
There\u2019s a good chance your website already uses Google Fonts in some way. But if you follow these 5 tips for optimizing performance when using Google Fonts with WordPress, I think you\u2019ll notice a difference. Although it may be small, unoptimized Google Fonts can have an impact on your website\u2019s loading time and overall user experience. There are several manual options to optimize your Google Fonts, but I do recommend that most users install a font optimization plugin, such as OMGF. Of course, Divi is always a great option for any type of font optimization and management.<\/p>\n
We want to hear from you. Do you use any of these tips for optimizing Google Fonts with WordPress? Let us know in the comments. <\/strong><\/p>\n
Featured Image via Sammby \/\u00a0shutterstock.com<\/em><\/p>\n
\n<\/div>\n
[ad_2]
\n
Source link <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] Great typography on a website can have a positive impact on conversions. Choosing the right fonts and optimizing them is crucial. Google Fonts is a highly popular service, as they are well-designed and can add an extra level of elegance to default websites. Unfortunately, like anything else on the web, they can harm your […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[529],"tags":[],"class_list":["post-811807","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts\/811807","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/comments?post=811807"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts\/811807\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/media?parent=811807"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/categories?post=811807"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/tags?post=811807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}