So you want to use a Google font on your blog. You’ve fallen in love with Open Sans and you just gotta use it on your brand new landing page.
But you don’t know how to edit your theme files or use an FTP to upload the files or even where do you put stuff and OMG! even after a half hour of scouring the internet you just give up. There’s no way to do it. You’ll just have to email your web designer or be happy with the fonts your theme comes with.
Wrong!
You can use a Google font without knowing any CSS or having to make complicated theme file edits and uploading the changes to your server. In fact, you could probably do this in about 5 minutes!
What I’m going to show you today will be helpful if you want to add a font and only use it occasionally. If you want to replace a whole font style, like you want all headings to be this font from now till forever, that will require some CSS knowledge, which I’ll go over in my upcoming HTML & CSS Crash Course for Creative Bloggers.
5 Steps to Adding and Using a Google Font on Your Blog
(Zero coding knowledge needed!)
1. Pick your Google font
Go to google.com/fonts and pick the font(s) to you want. For this example, we’re going with my favorite Google font, Open Sans. Click the blue button to add the font to your collection.
Once you add it to your collection, click the Use button that appears.
On this new page, select the styles you want the font to have. If you aren’t sure what you want, just select the two Normal options.
OK, you’re done for now. Keep this window open while we get your WordPress site ready for the Google font.
2. Now in another window log into WordPress and go to Appearance > Editor
When you get here, you’ll see the code for your current theme. Click on Theme Header so you’re editing the header.php file of your theme.
3. Grab the code from Google Fonts and add it to your theme
Go back to your window that had Google fonts. Copy the line of code in the page’s step #3.
And paste it between the <head></head> tags.
Now click on the Update File button.
4. Grab the code you need to use your new font
Remember, this is a solution to adding a font without knowing CSS. It’s perfect for just a few times that you want to use your new Google font —like for a header on a landing page or for one particular style in a blog post.
Go back to your Google font window and scroll down to #4. This will tell you what to put after <span style=”. Just copy and paste!
Example: <span style=”font-family: ‘Opens Sans’ sans-serif;”>.
5. Use <span> to use your new font
OK, you added the code to your theme files, and you figured out the code you need for the <span> tags. Now to use your new font!
In your text editor, put the <span> tag around any text you want using your new Google font. Don’t forget to follow the buddy system rule: every tag needs it’s buddy to close it out! You want a <span> tag to start, and a </span> tag to finish.
Example: <span style=”font-family: ‘Opens Sans’ sans-serif;”> This is my gorgeous new heading 1 font just for this landing page </span>
Give yourself a high-five!
You did it! Awesome job. You can use that <span> tag whenever you want to use your new Google font.
Leave a Reply