12 Comments

How to Host Google Fonts on Your Own Server

Themify Tutorial How to Host Google Fonts On Server

Google Fonts is probably the largest free font community in the industry. All Themify themes and Builder come included with the entire Google Fonts collection. But in case you want to host Google Font files on your own server (for privacy concerns), here's a tutorial for you.

In this edition of our tutorial series, we'll show you how to manually add a Google Font or any font without a plugin. All you need is some CSS code, that we'll provide, and the font file. This is a surprisingly easy hack that anyone can do without any coding knowledge.

We will be using the Lato font for this guide. Here is what you need to do to install the font:

  • Download any font that you want to use (it will be a .rar or .zip file), then extract it. The font file should be available in .otf or .ttf format.

    Google fonts website
  • Use a FTP Software or your cPanel's File Manager to create a font folder on your server (eg. create a 'fonts' folder in /wp-content/uploads/fonts').

    Font Folder
  • Upload the font files to your newly created fonts folder

    Uploaded Plugin
  • Go back to your WordPress panel, and click on Appearance > Customize > Custom CSS and add the following CSS (if you are using a non-Themify theme, go to Appearance > Customize > Additional CSS to add the CSS code). The CSS code basically specifies the font name and where the font file is located on the server. Remember to replace the domain shown in the CSS code below to that of your own site URL. 
    
			/*Font change for H1 */
			@font-face {
			font-family: 'Lato-Regular';
			src: url('https://yourdomain.com/wp-content/uploads/fonts/Lato-Regular.ttf');
			}


    CSS for adding the font

That is all you need to do to add the font. But now we need to specify which element will use that font. Add the following CSS code in your Themify Customize panel (WordPress Admin > Appearance > Customize > Custom CSS) to specify your H1 tag to use the Lato font. 


	h1 { 
	font-family: Lato;
	}

Css for changing the H1 font

If you want all heading tags to use Lato, the CSS code would be as follows:


	h1, h2, h3, h4, h5, h6 { 
	font-family: Lato;
	}

And that is all you need to do to host your own fonts on your server! You can use this tutorial with any Google font or any .ttf font file. We hope you enjoy this foundation tutorial, and check back for more soon!

Speaking of typography and content, if you haven't already translated your WordPress site into a multilingual one, see just why our multilingual tutorial could boost your web traffic easily!