Challenge: Google Font Hack With WordPress

As we near the end of the course, I have a challenge for you! Add a Google Font to your blog to use for a new landing page you're creating. The instructions are below. Good luck!

---

Instructions

5 Steps to Adding and Using a Google Font on Your Blog

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 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="

5. Use to use your new font

OK, you added the code to your theme files, and you figured out the code you need for the tags. Now to use your new font!

In your text editor, put the 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 tag to start, and a tag to finish.

Example: <strong><strong><span style=”font-family: ‘Opens Sans’ sans-serif;”> This is my gorgeous new heading 1 font just for this landing page </span> </strong></strong>

---

Give yourself a high-five!

You did it! Awesome job. You can use that tag whenever you want to use your new Google font.