WordPress sites look beautiful when using commercial themes. These premium themes use thumbnail images and good looking fonts to make appealing look. However, the cool appearance comes with certain cost that you as a site owner need to bear. In our earlier article, we have explained the problem with thumbnail. And in this article, let us explore the problems with fonts and how to disable Google Fonts in WordPress site.
Using Fonts in WordPress
Below are the popular ways to use fonts in WordPress and you can switch the way of using fonts whenever needed.
- Using third-party fonts like Google Fonts
- Hosting custom fonts on your server
- Using system fonts
Whatsoever is the way you use; you need the following three things to use any font family:
- A font file with different extensions like woff, eot, ttf or svg. Though one file is used primarily, remaining files are used for fallback and compatibility purposes. Alternatively, you can use CSS font files especially when loaded from Google Fonts website.
- Importing fonts from the file to your site. CSS font import was popular in earlier times and nowadays it is common to link external font files in the header section.
- Use CSS rules in HTML elements to mention font family and other properties.
Here is an example CSS to use external file link for using Roboto family with regular 400 weight in the header section.
<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&display=swap" rel="stylesheet">
Below is how you can use the Roboto font family with H1 headings in HTML:
h1 {
font-family: 'Roboto', sans-serif;
}
Being said that each HTML element on your page needs a font family to render the way it was intended to appear on the browser.
Google Fonts in WordPress
It is common to declare the font family for HTML body element so that entire page use same font. However, those good looking themes need to use different font family for elements like heading, blockquote, pre-formatted, table, button, etc. To avoid designing multiple fonts or pay for licensing cost, many WordPress theme and plugin developers use free third-party fonts. Here comes the use of Google Fonts with the popularity from Google and CDN capacity of delivering the font files nearer to your site’s visitors.
Almost 7 out of 10 commercial WordPress themes use Google Fonts and offer custom theme panel. You can choose from one of the available 1250+ font families. Since there are large number of varieties available for free usage, developers can simply link required Google Fonts files with family and weight details in the header section. You can view the Google Fonts files on your site by looking at your site’s source code.
You can see the fonts are loaded from fonts.googleapis.com server. Open Sans and Roboto are the font families and 400 / 600 indicate the font weights. Sometimes you may also see the fonts are loaded from Google domains like fonts.gstatic.com.
Problems Using Multiple and External Fonts
Using Google Fonts in WordPress will create the following problems:
- Any third-party resource will affect the page loading speed of your site. Examples include Google Fonts, Analytics tracking, Facebook Pixels etc.
- Using multiple font family and font weights will increase the number external files needed from Google server. This will increase the number of HTTP requests sent from your site thus reduce the page loading speed.
- Browsers will not load the text until downloading all font files from Google servers. This may take some time and the users will see blank empty page during that time. You will see warnings in Google PageSpeed Insights tool to make sure the text is visible during web fonts loading.
- You may need to use preconnecting and DNS prefetch for connecting to Google Fonts domains for speed up the loading of your site.
Since speed is one of the official ranking factors in Google Search, you have no other options to avoid using third-party Google Fonts.
How to Disable Google Fonts in WordPress?
Now that it is clear you have to disable Google Fonts in WordPress to improve the page loading speed. But the question is how to do it with or without impacting the site’s appearance when your theme and plugins use Google Fonts. Followings are the options available for you.
- Completely disable Google Fonts so that your site will use browser’s fallback font.
- Add swap parameter to Google Fonts files and continue using them.
- Use system font by adding custom CSS or changing your theme.
We will explore all these options in the following sections.
#1 – Completely Disable Google Fonts in WordPress
As Google Fonts became the speed issue, almost all caching and speed optimization plugins offer the feature to combine or remove Google Fonts from your site. The best option we recommend is to use Perfmatters plugin which also comes with complete set of options to remove bloating. For example, you can disable WooCommerce styles and scripts on posts and pages with few clicks if you are using WooCommerce plugin.
- Purchase and install Perfmatters plugin on your site.
- Go to “Settings > Perfmatters” menu.
- Navigate to “Fonts” section under “Options” tab.
- Enable the button against the option “Disable Google Fonts”.
- Click “Save Changes” button to apply the changes.
If you do not want to use a premium plugin, then go to “Plugins > Add New” section in your dashboard and install “Disable and Remove Google Fonts” plugin. This is a free and dedicated plugin that does only one work to completely get rid of Google Fonts on your site.
The surprising part is that the plugin does not have any annoying settings page. All you need is to simply install and activate it on your site.
Other free options include Autoptimize which is useful along with caching option. If you are on SiteGround hosting, use SG Optimizer plugin for combining all Google Fonts to reduce the number of HTTP requests.
#2 – Swap Google Fonts Display
As mentioned above, one of the major reasons for not using Google Fonts is that it will delay loading of the text content. To handle this, you can use a CSS property like below:
For using external font file:
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
For using with CSS @import:
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
</style>
Recently, Google introduced the support for CSS font-display: swap property with Google Fonts. This essentially means you can instruct the browser to first use the default browser’s font until Google Fonts files are available. When the browser finished downloading Google Fonts files, it will swap the display and use Google Fonts. In this manner, there will be no delay in viewing the text content. This will help you to fix the problems like ensure text remains visible during web font load in Google PageSpeed Insights tool.
In order to implement font swapping, you can use Swap Google Fonts Display plugin. This plugin also does not have any settings, all you need to do is simply activating the plugin on your site to add display=swap value in all Google Fonts files.
#3 – Use System Fonts
Recently many of the WordPress themes offer an option to use system font stack along with Google Fonts. For example, you can use popular lightweight themes like GeneratePress for this purpose. All you need is to simply select the system font option in the customizer settings.
If you want to manually use system fonts in your site, simply add the following CSS under “Appearance > Customize > Addition CSS” section. This CSS is only for the body element and you may need add other elements in the declaration if needed. In addition, you have to manually remove other CSS imports or file links to avoid those font files are also loading.
body {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}Though this is an easy option, you will not have a fixed font display in all devices when using system font.
Final Words
No matter which method you use, make sure to test the site that it does not contain any Google Fonts file in the source code. If you are using the swap option, check the font CSS files contain display=swap property. In addition, test your site with Google PageSpeed Insights tool to make sure there not fonts related warnings.
Leave a Reply
Your email is safe with us.