Using special fonts on your WordPress website can make it look a lot more professional. In a previous article, I wrote about changing the font you’re using on your WordPress website by either changing the stylesheet, or using HTML in posts or pages. You can read this article here: change the font in WordPress. However, more unusual fonts are not supported by default. This is what you could use Google Fonts for.
Google Fonts is a library of over 600 free to use webfonts. Here you can find fonts, and copy a snippet of code to WordPress, that allows your website to use those fonts. This means your website communicates with Google to make use of the specific font.
Note: using fonts from Google Fonts slows your website down by a few milliseconds. As long as you’re not using too many different Google fonts, this is usually not a problem.
Examples of some of the more interesting fonts, see the picture below:
Full video tutorial:
Finding a font and the code snippet
Go to Google Fonts. Here you can browse through 600+ open source fonts. I like browsing through the fonts using the the ‘Poster’ tab, as this tab displays the most fonts on a page. Click ‘Poster’ if you want to use this display mode.
Find a font you want to use, and click ‘Add to collection’. You can add multiple fonts to your collection, to install them all at once. In this example I’m just going to install one font; the ‘Lobster’ font.
Once you’ve selected all the fonts you want to use on your WordPress website, click ‘Use’, down in the the browser window.
You’ll now be taken to a page where you can copy the code. You need this code to add the font to to WordPress. Here you can also select additional font styles, and characters sets.
Scroll down, select the code, and copy it.
Installing the font to WordPress
Go to your WordPress website, and click ‘Appearance’, and then ‘Editor’. Here, select ‘Header’ to open the header.php file.
In the header.php file, find the start of the head, which is indicated by the <head> tag. Paste your code right after this tag. Click ‘Update file’ to save the changes to your header.php file.
Done! You can now use this font in WordPress. Not sure how? See how to change the font in WordPress – Font type, size and color.