6 Easy Steps To Host Google Fonts On Own Server

Do you know how to host Google Fonts on own server? You might be thinking that what is the need of hosting fonts locally. The biggest advantage of doing so is it improves the performance of your website. The requests to the external server which hosts the typographical elements are eliminated which speeds up the interface. A major reason people convert PSD to WordPress theme or shift from other platforms is that the CMS has endless customization possibilities. They can create an interface with unique visual appeal and rich features. However, adding new features can sometimes affect the performance of the interface. This, in turn, can impact the user experience and also lower the traffic to the website. In this tutorial, we will provide an easy method to host Google Fonts locally and optimize the website’s performance.

 

1. Choose A Font

 

The first step is to choose a font from the vast library of Google’s typographical elements service. Visit https://fonts.google.com/ and browse through 915 options to choose suitable typefaces. Once you have finalized the fonts you want, access the Google Webfonts Helper tool. Search for the typographic element you want and then select charsets and styles. In the image given below, we have chosen the Latin charset along with regular and bold styles. You can make the selections according to the requirements of your project.
Choose A Font

2. Choose Browser Support

 

Users must also choose the kind of browser support they want. There are two options provided for this purpose. The first is called “Best Support” which includes fonts in WOFF, WOFF2, EOT, TTF, and SVG formats. The second is “Modern Browsers” which contains WOFF and WOFF2 fonts. The WOFF or WOFF2 formats ensure compatibility with almost all types of popular browsers.
Choose Browser Support

Scroll down the screen and you will see a blue color tab in the section called “Download files”. When you press this button a zip file containing your chosen font will be downloaded to your system. Ensure that the charset and style configurations mentioned above the button are the same as selected by you. Download the files and move to the next step.

Choose Browser Support 2

3. Upload The Files To Your Server

 

You will now have to upload the files to your server. Use an FTP client to connect to your website’s root folder. You can also access the folder through the cPanel account of your hosting service. Access the “theme” folder which will be located inside the “wp-content” folder. In the “theme” folder you will have to create a new folder called “fonts”. The font path will look something like this:

 

example.com/wp-content/themes/your_theme/fonts

 

Upload all the files that you had downloaded in the previous step to this newly-created folder.

 

4. Generate CSS And Modify Your Theme

 

In this step of our guide to host Google Fonts on own server, we will reference the fonts in CSS to the website. Most modern themes have a custom CSS option which can be found in the theme settings. The option is usually given a name like “Additional CSS”. You will need to add the fonts’ CSS in that section. In case your theme does not have a custom CSS option, you will have to use a plugin for the purpose.

 

Go back to your Google Webfonts Helper screen. There under the “Custom CSS” heading, you will find the code you require.

Generate CSS And Modify Your Theme

Locate the field for “Customize folder prefix (optional)” and enter the path to your fonts folder in the following manner:

 

http://example.com/wp-content/themes/your_theme/fonts

 

Replace “http://” with “https://” according to your URL structure. In case, you are using a CDN service, use the following path:

 

cdn.example.com/wp-content/themes/your_theme/fonts

 

The following image shows the CSS code with a CDN-based URL which will be added to the theme’s custom CSS:

Generate CSS And Modify Your Theme 2

5. Disable Your Theme’s Google Fonts Reference

 

Many modern WordPress themes come with Google Fonts integration. In case you are using such a template, it will still try to display the typefaces from external servers. You will have to disable your layout’s Google Fonts to prevent this situation. This can be done by using plugins like Remove Google Font Reference. These tools deactivate all references to such typographic elements so that no third-party element like themes or plugins can make calls to external servers. You will find the option to disable the reference in the settings of many themes and plugins.

 

6. Test Your Website

 

Once you have uploaded the files, integrated the CSS, and disable any existing Google references, it is time for testing. Open your website after clearing the cache of your browser or access it in a completely new browser. Right click on the page and select “View page source” from the menu which opens. Press “Ctrl+F” and enter the font path in the box. As the typefaces are loading from the local server, the path will be highlighted. You can also use tools like Pingdom and GTMetrix to verify the same.

 

Conclusion

 

This is how you can simply host Google Fonts on own server. This will help you increase the aesthetic appeal of your website without compromising on its performance.

 

Comments are closed