How to Load WordPress Fonts locally rather making call to Google’s fonts.gstatic.com API or TypeKit API?

How to Add Custom Fonts in WordPress

I wanted to write article on Google Fonts loading locally since long time and finally yesterday night I did changes on my site the way fonts loads on Crunchify.

So far I’ve been using Google fonts Oswald and Lato on Crunchify.com. As you could see below, in my theme’s functions.php file I was enqueuing both fonts and using it directly by making call to fonts.googleapis.com.

wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Oswald:400,700|Lato:400,400i,700', array(), PARENT_THEME_VERSION );

Well, there is nothing wrong to that, but as a WordPress speed optimization goal, why not load fonds from your site locally itself which saves you almost 7 or more external API requests.

Check it out: Open a URL which you see in above image in new tab and you will see, internally it’s making 14 more fonts.gstatic.com API calls and that’s not good 🙁

http://fonts.googleapis.com/css?family=Oswald%3A400%2C700%7CLato%3A400%2C400i%2C700&ver=2.4.2

Also, there is an another point:

No matter what fonts you need at runtime or on a specific page, weather italic, bold or regular, above Google font API loads all fonts on each page which are absolutely not required.

This tutorial will help also if you have below questions:

• How to embed fonts in CSS?
• How do I load external fonts into an HTML document?
• How do I use the webfonts in WordPress
• A Beginner’s Guide to Using Google Web Fonts
• Load wordpress fonts using css
• Load and use TypeKit fonts in WordPress
• Adding Custom Fonts to WordPress with @Font-Face and CSS3

How to fix this issue and load fonts locally?

Let’s get started:

Step-1

1. Choose your favorite fonts which you want on your site. In this tutorial, we will choose Lato fonts as an example.
2. Go to Google Fonts and download it.

Step-2

Extract Lato.zip file and you will see all 10 Lato fonts with .ttf file extension. Usually you just need regular, bold and italic fonts on your site.

Go ahead and remove remaining files and just keep below 3 files

• Lato-Regular.ttf
• Lato-Bold.ttf
• Lato-Italic.ttf

Step-3

Now you need to convert your fonts to woff2, eot, svg, ttf, wof formats. Head over to site https://font-converter.net/en and you will be able to upload .ttf file which will convert font to all of these formats.

Step-4

Put all your new font files under your themes/fonts/lato folder. In this case it’s /public_html/wp-content/themes/fonts/lato folder.

Step-5

Open your theme’s style.css file and put below code:

/* fonts:
================================================================================= */

/* lato regular */

@font-face {
	font-family: 'Lato';
	src: url('../fonts/lato/Lato-Regular.eot');
	src: url('../fonts/lato/Lato-Regular.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/lato/Lato-Regular.woff2') format('woff2'),
		 url('../fonts/lato/Lato-Regular.woff') format('woff'),
		 url('../fonts/lato/Lato-Regular.ttf') format('truetype'),
		 url('../fonts/lato/Lato-Regular.svg#Lato_regularregular') format('svg');
	font-weight: 400;
	font-style: normal;
}

/* Lato italic */

@font-face {
	font-family: 'Lato';
	src: url('../fonts/lato/fonts/lato/Lato-Italic.eot');
	src: url('../fonts/lato/fonts/lato/Lato-Italic.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/lato/fonts/lato/Lato-Italic.woff2') format('woff2'),
		 url('../fonts/lato/fonts/lato/Lato-Italic.woff') format('woff'),
		 url('../fonts/lato/fonts/lato/Lato-Italic.ttf') format('truetype'),
		 url('../fonts/lato/fonts/lato/Lato-Italic.svg#Lato_regularitalic') format('svg');
	font-weight: 400;
	font-style: italic;
}

/* Lato bold */

@font-face {
	font-family: 'Lato';
	src: url('../fonts/lato/Lato-Bold.eot');
	src: url('../fonts/lato/Lato-Bold.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/lato/Lato-Bold.woff2') format('woff2'),
		 url('../fonts/lato/Lato-Bold.woff') format('woff'),
		 url('../fonts/lato/Lato-Bold.ttf') format('truetype'),
		 url('../fonts/lato/Lato-Bold.svg#Latobold') format('svg');
	font-weight: 700;
	font-style: normal;
}

Also, update font-family whereever you want to use Lato font on your site.

body {
    background-color: #fff;
    color: #000;
    font-family: 'Lato', sans-serif;   // where ever you want to use Lato font
    font-size: 17px;
    line-height: 1.8!important;
    letter-spacing: 0.25px;
}

Step-6

• Go to theme’s functions.php file
• Remove enqueuing fonts from Google font api
  • in my case this line: wp_enqueue_style( ‘google-fonts’, ‘//fonts.googleapis.com/css?family=Oswald:400,700|Lato:400,400i,700’, array(), PARENT_THEME_VERSION );
• Save file

And that’s it. You are now successfully loading fonts from local file system 🙂

Let’s verify if it’s working or not?

• Now clean your browser and blog cache files.
• Reload your blog
• Inspect element
• Go to Network tab
• Check for Lato woff2 font and you will see it loaded from your file system

On Crunchify we are using geomanist fonts for heading and body font-family.