How to use a Google font on WordPress?
It is very easy to use any Google font on WordPress by pasting a simple piece of code into your WordPress theme’s functions.php file. Before you do this it is advisable to install your WordPress theme’s child theme. A child theme will allow you to add additional code to your WordPress theme’s files without running the risk of losing the customisations when you do a theme update.
Why does my WordPress theme not display the font weights correctly?
Google offers a vast collection of free fonts for website owners and web developers to explore new typefaces and utilise great typography in their web design projects. Whilst most WordPress themes come pre-installed with the Google font functionality, the problem which I ran into is that not every font weight is available. The WordPress theme developer may have only installed a couple of font weights for each font instead of the complete font family. This can be very annoying if you have a specific design in mind and your desired font weight simply isn’t available. In fact this is exactly what happened to me whilst building a WordPress website using the X theme by Themeco. X is a fantastic WordPress theme and whilst it allows you to choose from any of the Google fonts, the specific font that I was using did not have the correct font weights installed, and despite selecting the correct weight within the CSS code it simply did not work and instead defaulted to a heavier weight.
How to install the Google font into WordPress so that I have access to all font weights?
After realising that my desired font weight wasn’t installed by the theme developer, I researched a way to install the whole font family using the bare minimum code and without relying on a plugin.
After reading several blog posts on the topic, I found that the most simple method was to use the code below which you can copy and paste into your WordPress theme’s funtions.php file (you will need to replace the font family and font weights with your desired font – the correct code can be found on the google font web page for the specific font that you intend to use).
function custom_add_google_fonts() {
wp_enqueue_style( ‘custom-google-fonts’, ‘https://fonts.googleapis.com/css?family=Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i’, false );
}
add_action( ‘wp_enqueue_scripts’, ‘custom_add_google_fonts’ );
In the example code above, you can see that I have specified a font called Josefin Sans and have requested all font weights from 100 through to 700 (this also includes the italic fonts too).
To find the correct code for your font simply visit https://fonts.google.com and search for your desired font either with the search bar or by browsing through the library of fonts. Once you have found your font click the ‘plus’ icon and then click customise. Now put a tick next to all of the font weights that you would like to use. Next click embed and select everything from the start of the font name to the last of the font weights. Basically everything in bold. Now paste that code over the portion of code that specifies the font family and weight in the code that I mentioned earlier which I have repeated below (I have also bolded the section that you need to replace with your new code).
function custom_add_google_fonts() {
wp_enqueue_style( ‘custom-google-fonts’, ‘https://fonts.googleapis.com/css?family=Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i‘, false );
}
add_action( ‘wp_enqueue_scripts’, ‘custom_add_google_fonts’ );
Once the code has been installed in the functions.php file, you will need to specify that the font is used within the CSS code. For example if you want to apply it to the H1 headings and require a font weight of 600, use the code below.
h1 {
font-family: josefin sans, sans-serif;
font-weight: 600;
}
Obviously that code needs to be tailored to your needs depending on what heading size you need it for, the font family you intend to use and the font weight you require.
You should now hopefully have access to the Google font and all of it’s font weights.
I used this method on a recent Web design project for a professional oven cleaning service in Brighton and Hove. You can see the finished website here. If you require a WordPress website for your business please get in touch with me for a quote.
