• 5th June 2023 3:53 am
FREE weekly seminars

Add Google Fonts to your Theme

  • News, Theme Design

In this post, we will go through the actions of adding Google fonts to replace the default fonts of our theme. Or you can watch the video of the same process.

Choosing our fonts

First, we need to go over to google fonts and choose what we will be using. Google fonts are free and easy to setup. There are other options outside the scope of this post. Click here for Google Fonts. You can use the sidebar on the right to classify the sort of fonts you are interested in. If you know the name of a font then use the search bar.

Characteristics

You can also choose fonts by certain characteristics.

  • Serif – These are the fonts with decorative lines at the ends of characters.
  • San Serif – These fonts do not have the decorative lines on the ends
  • Display – These are font usually expected for larger sizes
  • Handwriting – These are fonts that look like handwriting
  • Monospace – These fonts have the same distance between the characters like an old typewriter. Usually, fonts space narrow characters closed and wider further apart.

Sorting can be for trending (popular), by date added or just alphabetical.

You can also choose fonts by

  • Number of available styles in a font coleciton. Bold, italic and thicker or thinner versions of the same font may be available.
  • Thickness – You can select for a thinner or thicker line style
  • Slant – Choose the amount of slant of the letters
  • Width – Choose the width of the characters

Example Text

If you are wanting to test a particular piece of test then you can write it into any of the fonts displayed. You can then choose to have that text used on all the fonts being shown.

Select your fonts

Click on the plus sign to add the fonts you want. You must take care not to add too many, especially if they will come in multiple versions. Fonts will need to be downloaded by the browser every time a page is loaded just link a script or image. This means that too many fonts will slow down your web pages. You will see the selected fonts showing in a box toward the bottom of the screen. Click on the bar to open up the box.

Checking the chosen fonts

You can tell from this box which fonts you have chosen and whether Google in concerned that page load speed will be a problem. You can see that in this case, we are fine. When you are finished choosing your fonts you will need the information shown here to fill in your theme information.

Setting up your theme

There are two tasks we need to perform to have your new font choices used in your theme. The first is to ask your theme to add them to your pages, and the second is to refer to them in the CSS to specify exactly where they will be used. Whether it is the main parent theme or child theme, the process is the same.

Declare the fonts your will be using

First, you need to add code to the functions.php file to declare to WordPress that we wish these fonts to be added. You need to declare a function. I suggest you use the name of the field followed by an underscore and then resources, or fonts.  In that function, you need to use the enqueue style command shown. The first parameter ‘wpbizclub17-fonts’ could be your theme name followed by fonts, in the second you need to replace the fonts I have with your own. Notice the | between each font and all spaces are replaced with the + sign. If you find there is already another function with a number if wp_enqueue_style calls, then you may just want to add your line and not create a separate function.

function wpbizclub17_resources() {
wp_enqueue_style('wpbizclub17-fonts', 'https://fonts.googleapis.com/css?family=Oswald|Source+Sans+Pro', array());
}

add_action('wp_enqueue_scripts', 'wpbizclub17_resources');

Specify where the font is used.

Now you need to edit your style.css file, assuming this is your main stylesheet for your theme. Here you need to refer to the Google fonts and where they will be used. Here are some examples

// using google font for body will make it work everywhere except whee overwritten.
body {
 font-family: 'Source Sans Pro', sans-serif;
 font-size: 16px;
}
// using google font oswald for all heading styles
h1,h2,h3,h4,h5,h6 {
 font-family: 'Oswald', sans-serif;
}

Now your theme should display your fonts and apply them as you have requested. You may find certain fonts need a larger or smaller font size to look right on the page. Line height can also help to display your new font well.

Change your mind?

If you ever change your mind you can alter your style.css for how the fonts are used. If you stop using a particular font or want to add a new one then change the entry in the functions.php. The changes will be almost immediate, check to flush any cache. make sure you remove any font no longer used from the functions.php otherwise, it will be adding unnecessary size to your pages.

 

 

 

 

More Articles