google fonts in wordpress

January 4, 2023

How to Host Local Fonts in WordPress for a Faster Website

Do you want to add third-party fonts to your website without slowing down your website speed?

Custom fonts improve the typography and user experience of your website, but they take longer to load. The good news is that you can host your fonts locally to ensure your website is always fast.

In this article, we’ll show you how to host local fonts in WordPress.

How to Host Local Fonts in WordPress for a Faster Website

Why Host Fonts Locally in WordPress?

While typography and custom fonts can improve the overall website aesthetics, they do have a negative impact on your WordPress performance. For example, if you are using a custom font from Google fonts, then they’re loaded from third-party services which will slow down your website.

Luckily, there is a way to use custom fonts without slowing down your site. A new Webfonts API was introduced in WordPress 6.0. This allows you to host fonts locally so they load faster.

Another reason to host Google Fonts locally is to stay GDPR compliant. That’s an important legal consideration if you have website visitors from the European Union.

When someone visits a website that uses Google Fonts, their IP address is logged by Google when the fonts are loaded. Because this is done without their permission, the EU now considers that a breach of privacy regulations, and you may be liable for damages.

That being said, let’s take a look at how to host local fonts in WordPress for a faster website. We’ll cover two methods, and the first method is recommended for most users.

Method 1: Hosting Local Fonts in WordPress With a Plugin
Method 2: Hosting Local Fonts in WordPress Manually

Method 1: Hosting Local Fonts in WordPress With a Plugin

The first thing you need to do is install and activate the OMGF (Optimize My Google Fonts) plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

OMGF is one of the best WordPress typography plugins. It offers a beginner-friendly way to improve performance and GDPR compliance by hosting Google Fonts locally.

Upon activation, you need to visit Settings » Optimize Google Fonts to configure the plugin. You should be looking at the ‘Optimize Fonts’ tab.

Notice the statement under the ‘Optimize Google Fonts’ heading that you just need to use the default settings to automatically replace your Google Fonts with locally hosted copies.

That means that as you scroll down the settings page, all you need to do is make sure that the ‘Font-Display Option’ has the default setting of ‘Swap (recommended)’ selected.

All you need to do now is click the ‘Save & Optimize’ button at the bottom of the page.

You’ll see a message at the top of the screen that says ‘Optimization completed successfully.’

Congratulations! Your Google Fonts are now hosted locally. Your website will load faster and you have reduced the risk of European lawsuits.

Method 2: Hosting Local Fonts in WordPress Manually

You can also host fonts locally without using a plugin by using the @font-face method from our guide on how to add custom fonts in WordPress. While this method requires more work, it allows you to use any font that you like on your website.

You need to download the fonts you wish to use in a web format. There are many places to find great free web fonts, such as Google Fonts, Typekit, FontSquirrel, and more.

If you do not have the web format for your font, then you can convert it using the FontSquirrel Webfont generator.

Now you need to store the fonts on your WordPress hosting server. You can upload the files using FTP or using your host’s cPanel File Manager.

You should create a new folder called ‘fonts’ in the directory of your theme or child theme and upload it there.

Once you have uploaded the font, you need to load the font in your theme’s stylesheet using custom CSS. You can add the code directly to your theme’s style.css file, or by using the Additional CSS section of the theme customizer.

You can do that using CSS3 @font-face rule like this:

@font-face {
    font-family: Arvo;
    src: url(https://example.com/wp-content/themes/twentytwentyone/fonts/Arvo-Regular.ttf);
    font-weight: normal;
}

Don’t forget to replace the font family and URL with your own.

After that, you can use that font anywhere in your theme’s stylesheet or the Additional CSS section of the theme customizer. The CSS you use will depend on your theme and where you wish to use the local font. Here’s an example from our demo website:

h1 {
font-family: Arvo, Arial, sans-serif;
}

As you can see, our heading is now using the locally hosted Arvo font.

Adding Custom CSS With the Theme Customizer

We hope this tutorial helped you learn how to host local fonts in WordPress for a faster website. You may also want to learn how to increase your blog traffic, or check out our list of must have WordPress plugins to grow your site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Host Local Fonts in WordPress for a Faster Website first appeared on WPBeginner.

September 12, 2022

How to Disable Google Fonts on Your WordPress Website

Are you looking to disable Google Fonts in WordPress?

Loading too many third-party fonts can slow down your website. Visitors with a slow internet connection will have a better user experience if you use just a few system fonts. Plus, using Google Fonts can potentially make your site GDPR non-compliant, and no one wants that.

In this article, we’ll show you how to disable Google Fonts on your WordPress website.

Why Disable Google Fonts on Your WordPress Website?

The typography you choose for your WordPress website plays an important role in its design and brand identity. That’s why many website owners customize their typography by using Google Fonts.

However, loading too many fonts will have a negative impact on WordPress performance. That’s why we recommend you choose just two fonts and use them across your website.

Alternatively, you can disable Google Fonts entirely and simply use the system fonts that come with user’s computer. They look great and load much faster, especially for users with a slow connection.

That’s why we decided to disable Google Fonts when we redesigned the WPBeginner website. We wanted to make it easy for everyone to learn WordPress and grow their online presence, even if your internet connection isn’t the best.

Disabling Google Fonts may not be the right decision for all business websites or blogs. However, if you have visitors from areas with poor internet quality, then this is one way you can provide a better user experience.

Also, there are privacy issues with Google Fonts that may make your website non-compliant with laws like GDPR. Disabling Google Fonts lowers the risk your site will be caught in violation of any international privacy laws.

With that being said, let’s take a look at how to disable Google Fonts in WordPress.

Disabling Google Fonts in WordPress With a Plugin

The first thing you need to do is install and activate the Disable and Remove Google Fonts plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, the plugin will automatically disable all Google Fonts used by your theme and plugins. It doesn’t need to be configured.

Now WordPress will automatically use a default font in place of any Google Fonts that were being used. You should carefully check your website to make sure you are happy with the fonts that are now being used.

If you would like to choose different fonts, then see our guide on how to change fonts in your WordPress theme.

Disabling Google Fonts in OptinMonster

OptinMonster is the best lead-generation plugin for WordPress, and over 1.2 million websites use the software to grow their email list, increase sales, and get more leads.

However, OptinMonster uses Google Fonts by default. Luckily, it’s easy to disable them.

Disabling Google Fonts in Individual OptinMonster Campaigns

First, you should visit the OptinMonster website and log in to your Campaign Dashboard. After that, you need to click on a campaign and then click the Edit Campaign button.

This will open the OptinMonster Campaign Builder.

Next, you need to click the Settings icon at the bottom left corner of the footer bar.

In the sidebar panel, you need to select the Advanced tab.

Now you can scroll down to the ‘Display Settings’ section and toggle ‘Enable web fonts?’ to the off position.

Once you click the ‘Save’ button at the top of the screen, third-party fonts will be disabled for that campaign.

You will need to repeat these steps for each other campaign you want to remove Google Fonts from.

Disabling Google Fonts For All OptinMonster Campaigns

If you are comfortable with adding JavaScript code snippets to your site, then you can disable Google Fonts on all OptinMonster campaigns at once.

To disable Google Fonts in every campaign, you need to add this snippet in your website’s header or footer:

<script type="text/javascript">
	document.addEventListener('om.Scripts.init', function(event) {
	event.detail.Scripts.enabled.fonts.googleFonts = false;
});
</script>

If you want to disable all web fonts, including Google Fonts and FontAwesome, then you should add this code snippet:

<script type="text/javascript">
	document.addEventListener('om.Scripts.init', function(event) {
	event.detail.Scripts.enabled.fonts = false;
});
</script>

The easiest way to add those code snippets is with WPCode, the most powerful code snippet plugin available for WordPress. It lets you easily add custom code to any area of your site, and best of all, it’s free.

First, you need to install and activate the free WPCode plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Once activated, you need to go to Code Snippets » Headers & Footer.

Simply paste the code snippet in the Header field and then click the ‘Save Changes’ button.

Adding a JavaScript Snippet Using WPCode

We hope this tutorial helped you learn how to disable Google Fonts on your WordPress website. You may also want to see our ultimate WordPress security guide, or check out our list of ways to make money online blogging with WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Disable Google Fonts on Your WordPress Website first appeared on WPBeginner.

March 12, 2020

How to Add Custom Fonts in WordPress

Do you want to add custom fonts in WordPress? Custom fonts allow you to use beautiful combination of different fonts on your website to improve typography and user experience.

Apart from looking good, custom fonts can also help you improve readability, create a brand image, and increase time users spend on your website.

In this article, we will show you how to add custom fonts in WordPress using Google Fonts, TypeKit, and CSS3 @Font-Face method.

Note: Loading too many fonts can slow down your website. We recommend choosing two fonts and use them across your website. We’ll also show you how to properly load them without slowing down your website.

Before we look at how to add custom fonts in WordPress, let’s take a look at finding custom fonts that you can use.

How to Find Custom Fonts to Use in WordPress

Fonts used to be expensive, but not any more. There are many places to find great free web fonts such as Google Fonts, Typekit, FontSquirrel, and fonts.com.

If you don’t know how to mix and match fonts, then try Font Pair. It helps designers pair beautiful Google fonts together.

As you are picking your fonts, remember that using too many custom fonts will slow down your website. This is why you should select two fonts and use them throughout your design. This will also bring consistency to your design.

Video Tutorial

If you don’t like the video or prefer the written guide, then please continue reading.

Adding Custom Fonts in WordPress from Google Fonts

Google Fonts is the largest, free, and most commonly used font library among website developers. There are multiple ways you can add and use Google Fonts in WordPress.

Method 1: Adding Custom Fonts Using Easy Google Fonts Plugin

If you want to add and use Google Fonts on your website, then this method is by far the easiest and recommended for beginners.

First thing you need to do is install and activate the Easy Google Fonts plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you can go to Appearance » Customizer page. This will open the live theme customizer interface where you’ll see the new Typography section.

Clicking on Typography will you show different sections of your website where you can apply Google Fonts. Simply click on ‘Edit Font’ below the section you want to edit.

Under the font family section, you can choose any Google Font you want to use on your website. You can also choose font style, font size, padding, margin, and more.

Depending on your theme, the number of sections here could be limited and you may not be able to directly change font selection for many different areas of your website.

To fix this, the plugin also allows you to create your own controls and use them to change fonts on your website.

First, you need to visit Settings » Google Fonts page and provide a name for your font control. Use something that helps you quickly understand where you will be using this font control.

Next, click on the ‘Create font control’ button and then you will be asked to enter CSS selectors.

You can add HTML elements you want to target (for instance, h1, h2, p, blockquote) or use CSS classes.

You can use Inspect tool in your browser to find out which CSS classes are used by the particular area you want to change.

Now click on the ‘Save font control’ button to store your settings. You can create as many font controllers as you need for different sections of your website.

To use these font controllers, you need to head over to Appearance » Customizer and click on the Typography tab.

Under Typography, you will now see a ‘Theme Typography’ Option as well. Clicking on it will show your custom font controls you created earlier. You can now just click on the edit button to select the fonts and appearance for this control.

Don’t forget to click on the save or publish button to save your changes.

Method 2: Manually Add Google Fonts in WordPress

This method requires you to add code to your WordPress theme files. If you haven’t done this before, then see our guide on how to copy and paste code in WordPress.

First, visit the Google fonts library and select a font that you want to use. Next, click on the quick use button below the font.

On the font page, you’ll see the styles available for that font. Select the styles that you want to use in your project and then click on the sidebar button at the top.

Next, you will need to switch to the ‘Embed’ tab in the sidebar to copy the embed code.

There are two ways you can add this code to your WordPress site.

First, you can simply edit your theme’s header.php file and paste the code before the <body> tag.

However, if you are unfamiliar with code editing in WordPress, then you can use a plugin to add this code.

Simply install and activate the Insert Headers and Footers plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, go to Settings » Insert Headers and Footers page and paste the embed code in the ‘Scripts in header’ box.

Don’t forget to click on the Save button to store your changes. The plugin will now start loading the Google Font embed code on all pages of your website.

You can use this font in your theme’s stylesheet like this:

.h1 site-title { 
font-family: 'Open Sans', Arial, sans-serif; 
}

For more detailed instructions see our guide on how to add Google fonts in WordPress themes.

Adding Custom Fonts in WordPress Using Typekit

Typekit by Adobe Fonts is another free and premium resource for awesome fonts that you can use in your design projects. They have a paid subscription as well as a limited free plan that you can use.

Simply signup for an Adobe Fonts account and visit the browse fonts section. From here you need to click on the </> button to select a font and create a project.

Next, you’ll see the embed code with your project ID. It will also show you how to use the font in your theme’s CSS.

You need to copy and paste this code inside the <head> section of your website.

There are two ways you can add this code to your WordPress site.

First, you can simply edit your theme’s header.php file and paste the code before the <body> tag.

However, if you are unfamiliar with code editing in WordPress, then you can use a plugin to add this code.

Simply install and activate the Insert Headers and Footers plugin.

Upon activation, go to Settings » Insert Headers and Footers page and paste the embed code in the ‘Scripts in header’ box.

That’s all, you can now use the Typekit font you selected in your WordPress theme’s stylesheet like this:

h1 .site-title { 
font-family: gilbert, sans-serif;
}

For more detailed instructions check out our tutorial how to add awesome typography in WordPress using Typekit.

Adding Custom Fonts in WordPress Using CSS3 @font-face

The most direct way of adding custom fonts in WordPress is by adding the fonts using CSS3 @font-face method. This method allows you to use any font that you like on your website.

First thing you need to do is download the font that you like in a web format. If you do not have the web format for your font, then you can convert it using the FontSquirrel Webfont generator.

Once you have the webfont files, you would need to upload it on your WordPress hosting server.

The best place to upload the fonts is inside a new “fonts” folder in your theme or child theme‘s directory.

You can use FTP or File Manager of your cPanel to upload the font.

Once you have uploaded the font, you need to load the font in your theme’s stylesheet using CSS3 @font-face rule like this:

@font-face {
	font-family: Arvo;  
	src: url(https://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);  
	font-weight: normal;  
}

Don’t forget to replace the font-family and URL with your own.

After that you can use that font anywhere in your theme’s stylesheet like this:

.h1 site-title { 
font-family: "Arvo", Arial, sans-serif; 
}

Loading fonts directly using CSS3 @font-face is not always the best solution. If you are using a font from Google Fonts or Typekit, then it is best to serve the font directly from their server for optimal performance.

That’s all, we hope this article helped you add custom fonts in WordPress. You may also want to checkout our guide on how to use icon fonts in WordPress and how to change the font size in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Custom Fonts in WordPress appeared first on WPBeginner.