This is part two of my ombre social media buttons tutorial, but these instructions work for anyone who'd like to install Google Web Fonts on Blogger, self-hosted WordPress, or Typepad.
Google Web Fonts are free, easy to install, and lovely. Let's check them out!
Browse Google Web Fonts
Here's the fun part! To browse the Google Fonts library, go to: www.google.com/webfonts.
There's over 600 fonts in the collection right now, and they keep adding more, so you'll want to sort them.
From the menus on the left, you can organize the fonts by style. Up top, you can enter your own text in the "Preview Text" field. If you're following along with the social media menu tutorial, enter the names of your social media services so you can see how they'll look in your menu.
Options for sorting the fonts by name, date added, number of styles, and popularity are also at the top of the screen.
If you're going to use a combination of fonts for your project, or if you'd like to preview multiple font sizes at once, check out my buddy Chip Cullen's Font Combinator for expanded Google Fonts browsing.
Install Your Google Web Font
Once you've decided on your favorite font, it's time to install!
Google Web Fonts on Self-Hosted WordPress
There are two ways to install Google Web Fonts in self-hosted WordPress. You can either use a font management plugin, or add the font to your theme manually. If you'd like to go the plugin route, WP Google Fonts has you covered.
If you'd like to add the font manually there's a great tutorial at WP Beginner.
Installing on Blogger or Typepad
The first few steps for installing Google Web Fonts on Blogger or Typepad are the same.
To get started, click the "Quick Use" button to install a single font, or the "Add to Collection" button to select more than one font. If you're using a collection, press the "Use" button at the bottom of the screen after you've added all of your fonts to your collection.
On the next screen, if the font you've chosen has multiple styles, you'll be asked to choose the styles you want.
If you're only going to use the font for one part of your blog — for example, if you're choosing a font exclusively for your social media menu — you should select only the style you plan to use for your design. If you'd like to use the font throughout your blog, choose a normal, bold, and italic style if they're offered.
After you've made your style selections, scroll down and you'll be asked to choose a character set.
For many fonts, the selection is grayed out on the only available character set — Latin. The Latin character set is used in English and European languages. You may also see an option for "Latin Extended" — only choose this if your language includes accented letters.
After you've made your selections, it's time to install your font!
Installing Google Web Fonts on Blogger
To install your font on Blogger, first back up your template. To do that, go to "Template" and click the "Backup/Restore" button in the upper right. Save the resulting .xml file.
After you've backed up your template, copy the Google Web Fonts code from the "Standard" tab.
Next, open your template by going to Template > Edit HTML.
Hover your cursor over your code, click once, then press CTRL and F at the same time (PC) or Command & F (Mac) to open a search box inside the template. Type <b:skin> in the search box and press enter. Your template code will jump down to the <b:skin> tag and highlight it in yellow.
Paste the Google Web Fonts standard code directly above the <b:skin> tag. Then, enter a trailing slash (/) right before the closing angle bracket (>) of the web fonts code, like this:
If you chose to add the Latin Extended version of your font, change any ampersands (&) in your font link to & so they will encode properly.
Press the "Save Template" button and you're all set!
Installing Google Web Fonts on Typepad
Typepad users should copy the @import code option for Google Web Fonts.
Go to to Design > Content and click the pencil icon on your Navigation Bar.
Paste the code into your navigation bar module, and wrap it in <style> tags, like so:
<style> @import url(http://fonts.googleapis.com/css?family=FONTNAME); </style>
Press the "OK" button at the bottom of the navigation bar module to save your update.
Test Your Installation
Once you have your font installed, you should check to make sure it's working. You can quickly test your font by adding an HTML widget/gadget to your blog with a span style that uses your new font. Here's how:
In self-hosted WordPress, open a new Text widget. In Blogger, use a new HTML/JavaScript gadget. In Typepad, go to Content > Widgets > Embed Your Own HTML and press "add this module".
Enter this into your new widget/gadget:
<span style="font-family: 'Font Name Here';">Testing custom font</span>
Replace 'Font Name Here' with the name of the Google Web Font you chose. Save your gadget/widget and check out your blog. You should see "Testing custom font" in the font of your choice. Good job! You can delete the test widget now.
What's Next?
If you're following along with the ombre social media menu tutorial, you're ready to use your RGB color and your favorite font to make a stylish social media menu! Move on to Part Three: Ombre Social Media Buttons - The HTML and CSS.
If you want to learn how to use your new font for another part of your blog, check out the Blog Font Style with CSS tutorial series.
