Customizing your website is invaluable in creating your brand and defining who you are. You do it visually with graphics and textures, and through your copy. But what if your words don’t have the exact feel you are going for because the fonts aren’t speaking for you? Don’t worry, a few quick updates and you can have personalized Google fonts embedded right on your Genesis website.
Up until recently, web designers such as myself were able to do this the “easy” way with the Genesis Extender Plugin (don’t know what I’m talking about, don’t worry). But a recent update from Google has rendered this shortcut obsolete and we’re back to loading them in the old-fashioned way. Want a quick walk-through?
Select Your Google Fonts
Head over to Google Fonts and look around for what fonts fits your style best. They have a large selection of serif, sans serif and scripty fonts for body and headings. You can even preview your text in the font before deciding. Choose which ones you’d like by clicking the little red plus sign next to the font and it will save it for you for later.
Once you settle on the ones you want to load into your site, you will see this screen:
Click “Customize” and you will see this:
You will need to use all of these pieces in order to correctly place the fonts on your Genesis site.
Embedding Google Fonts on Your Genesis Website
Now that you have the fonts, let’s go over to your site. You’re going to put some code in two different places.
Placement #1: Your Genesis Theme Settings
Under the “Header Scripts” section in your Genesis Theme Settings, place both the standard embed code and the import code for your personalized Google Fonts that you chose.
Placement #2: Your CSS Coding
Congratulations! Your personalized Google Fonts are now loaded into your website. So it’s time to tell your theme to how use them. You can either use your Genesis Extender to help you with this OR you can swap out the coding directly in your stylesheet. Again, refer back to your Google Fonts for the correct snippet of code (always starting with “font-family”), which will be something like this: font-family: ‘PT Serif’, serif;
And that’s it! I can’t wait to see your pretty sites!