Customer Happiness Manager at PressMate September 11, 2017

Adding Google Fonts to WordPress theme manually

how to add google fonts in wordpress

Google Fonts is a service where Google provides access to free web typography for anyone. In other words, it is an interactive directory of free hosted programming application interfaces for web. There are more than 800 fonts available through main website of Google fonts. Basically, they are designed to provide a platform for various users to determine fonts and use it.

These font allows you to easily load custom fonts by referencing a stylesheet in your site’s header tag.
If you are  developing your WordPress themes and customize your site fonts without using any of the available plugins, you can easily enqueue custom Google Fonts on your site.

Everyone wants their sites to be different instead of being stuck on some standard option. Google Fonts is one of the easiest way to customize your website because ultimately text makes huge difference in your site’s look as it is an important element of web design.

Fortunately, Google Fonts are available in large number that everyone can use. An awesome service that everyone should take benefit of. So now we will see how you can add Google Fonts to your WordPress website manually.

Step 1: Select the Google web Font that you like
Go to Google web fonts website and select the font that you like. Click on the plus sign in the upper right corner to add font to your selection. Chosen font will appear in a new menu at the bottom of the screen.

Note: you can add several fonts and font families here.

Step 2: Choose style and additional character set
In your customize menu, tick boxes for the styles as well as the languages or special character collection you need on your site.The more you add, the more time it will take  to load your pages. The time load indicator in upper right corner will show how your selection will affect the speed of your website.

Step 3: Embed Fonts on your WordPress website
There are multiple ways to embed fonts in your WordPress website.

  1. Download font files and add via FTP
    Adding custom fonts to your WordPress using @font-face First, you need to download typeface you chose from Google Fonts and upload them to your server via FTP. After that, you need to place the files on your server. And then you can call fonts using @font-face selector,

  2. Adding fonts via CSS using @import
    Instead of loading the fonts from your own server, you can call it from somewhere else. However, it is very similar to @font-face. Just click @import in Google fonts to find the necessary CSS and then all you need to do is copy it (without the  <style> brackets) and paste it at the beginning of your theme’s stylesheet.

  3. Embedding Google fonts via HTML
    One of the simple way to add Google fonts to your website. Copy the code provided by Google and add it to the header.php file of your theme.

  4. Enqueueing Google Fonts
    This is a programmatic and recommended way of adding Google Fonts to your site. Add the following code to the functions.php file to your theme(child in case you are using a ready made theme and have created a Child Theme. TO know more about how to create a child theme and it’s advantages, click here).


    Save, upload  and remember to replace the link by your own.

Step 4: Call Google Fonts in your Stylesheet
Now you have your custom font fully integrated on your site and you can start using it in your website.To do so, all that’s left is calling it somewhere.
An example of how you can use it on your site is this:

Adding Google Fonts manually is highly recommended . However, if you don’t wish to mess around with the theme code, then check out these plugins you can use to integrate Google Fonts in your WordPress website.

1

Enjoyed the article?

Press 💚 below and join the other 13,000+ getting valuable updates from this blog.

wordpress wordpress updates

What are WordPress child themes and why should you use them ?


May 10, 2018 11:06 AM

Uncategorized wordpress wordpress security wordpress updates

How To Secure Your WordPress website


April 27, 2018 6:33 AM

wordpress wordpress updates

How to update WordPress plugin properly


March 27, 2018 10:58 AM

wordpress wordpress updates

What are automatic WordPress updates and how to turn them on


March 26, 2018 1:46 PM

Get Free Site Analysis

Want us to analyze your site first and then use our services? No worries. Just fill out the form to the right and we will be happy to send you a free report about your current website.