The DIY Blog Design series is an ongoing series to help YOU improve the design of the blog. Throughout the series I will share useful tips, tricks and information to help you design your blog yourself, without the need to hire a designer. Find the rest of the ongoing series here.
Google Fonts are awesome. They are free and there is a font for every need. Most Genesis themes use them, but what happens if you want a font that your theme doesn’t support? Adding your own custom Google Fonts to your blog’s theme is easy! You can learn how to use Google fonts on your Genesis Child Theme! Just follow along and use the copy and paste codes provided and your blog will soon have a new font overhaul!
Importing Fonts Via CSS with @import
This is a very simple way you can add Google fonts to your theme, however, if you have a very popular blog it could slow your site down! So while you can use this method it’s not recommended, and if you do have a very popular, high traffic blog, you should avoid using this method. In the example below the font is called using the @import method in the style.css file. This is easy to do and just requires you to edit your css. If you have a small blog, you will be fine if you choose to do it this way. Just copy and paste this code to the top of your CSS file and you will be able to use the new font in your theme! Be sure you move down to step 3 in the next section to actually tell your theme how and where you want to use the new theme!
Importing Google Fonts via Functions
This is the best way to load a font (or even a selection of fonts) for your blog. It might seem tricky, but just copy and paste, switch out a few terms and you are good to go!
Step 1: Find Your Fonts
First you will need to select the fonts you will want to use from Google, as well as the weights. The weights determine how thick or thin a font will be. If your font is very thin, it might only have a weight of 100. If it’s very thick and chunky it might have a weight of 700! Most “regular” font weights are 300.
Need help finding the right fonts? Check out these Google Font combinations for lifestyle bloggers!
Step 2: Open Your Functions.php
Log into your ftp and open up your functions.php file. You should download a copy of the unaltered file to have on hand in case you mess something up. If you mess up something on your functions.php it can lead to the dreaded whitescreen of WordPress death. If this happens just upload your unaltered copy of your functions.php file and overwrite the existing file on your server. Your blog will be restored! Don’t worry! Editing, and even messing up your functions.php file won’t cause you to lose any data (blog posts, etc). It can change how your theme works though, so edit with care, and ALWAYS back it up before working on it!
Using the code below, switch out the appropriate font names or terms to the Fonts you will be using. Then copy and paste the code to the end of your functions.php file. If your functions.php has an ending ?> make sure you put the copy and pasted code before it!
The code example above provides 3 examples of code to use. The first is generic, switch out the terms for the font name and weights. If you only need one weight of font, delete the second font weight. The second two examples provide real life examples on how to use this code. If you want to use Raleway or Raleway & Merriweather, just copy and paste the code as is! No need to edit it. If you want to use other fonts, just switch out the existing fonts for the fonts of your choice!
Step 3: Update the CSS
So far we have told our theme we want to use these fonts, but we haven’t told it where these fonts should be used! Now we have to go to our style.css or if you are using Jetpack and have the edit css option enabled you can override existing css there. Either way you will want to edit your css so that it displays your fonts appropriately. Need help? Refer to the code snippets below for guidance!
Note: Since the font was called in the functions file, @import does NOT need to be included.
That’s it! You are done! Enjoy your new font(s)!
Have you added custom fonts to your blog? I’d love to see a before and after shot, show me in the comments! Got questions or issues following the tutorial? Let me know in the comments!
Looking for more DIY Blog Design? Get the rest of the ongoing series here.