179464316What are Google web fonts?

Google web fonts are free fonts that Google allows people to use in their websites. And who doesn’t want free web fonts?

How do I add a Google web font to my WordPress website?

To add a Google web font to your WordPress website you will first need to go to http://www.google.com/fonts/ and look through their font options and decide which Google web font you would like to use. You can search for a specific font or narrow your search down by using their filter and filter by category, thickness, slant, width, script and styles. Or you can just scroll through until you see a Google web font you like.

Once you find a Google web font you like you can click the “Add to Collection” button to the left of the font and the Google web font will be added to your collection. You then can click the “Use” link to the right and you will be taken to a page with settings for the Google web font. Step number four is the most important. Step number four is what you will need to copy and paste into your CSS file within your website files on your FTP.   Google provide instructions. If you are not family will CSS files you can also search for a WordPress plugin that can help you use Google web fonts by searching Google web fonts in the plugins section (http://wordpress.org/plugins/).

You will need to paste the Google web font declaration under the selector(s) that you would like the Google web font to be used in. For example, if we chose the Google web font “Exo 2“, then you would paste the Google web font declaration (font-family: ‘Exo 2’, sans-serif;) under the h1 selector.

h1{
font-family: ‘Exo 2’, sans-serif;
}

Once you are done editing you CSS file, upload the update file.

There is only one last step. So you don’t have to mess with any other file besides your CSS file, I like to install the WordPress plugin “WP Google Fonts.” Go to http://wordpress.org/plugins/ and search “WP Google Fonts” and install the plugin and follow in install directions and then you will be able to see the Google web font you chose used in your website where you specified in your CSS file.

Now you should have a website with free web fonts thanks to Google web fonts.

Tags: , , , , ,