Google Font Directory provides bloggers and web developers with free web fonts to be used on their websites.
Here I will show you how to use those fonts on WordPress or any other website you own.
Contents:
- Add Google Web Fonts to WordPress without Plugin
- Add Google Web Fonts to WordPress Using WordPress Plugin
- Add Google Web Fonts to any Website
- Use Google Web Fonts Only on a Particular Text
Google Web Fonts can be added to a WordPress Blog with and without a plugin. Both methods are shown below.
Add Google Web Fonts to WordPress without Plugin
This method requires you to edit your theme’s header.php and style.css file. So do take a backup before beginning.
Go to Google Font Directory site and choose a font you want to use.
Alternatively you can use another free service called Font Comparer. It lets you compare all Google Fonts with a text or phrase you enter.
Once you select a font, various specimens of it will be displayed. Next click on the “Use this font” tab.
This tab will show you two pieces of code. The first one links to the style sheet on Google servers and second is the CSS code which is to be added to your style sheet.
Copy the first part and paste it in the header.php file of your theme. Make sure to add it at the beginning and inside the <head> … </head> tags.
Example:
<head>
<link href='http://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here' rel='stylesheet' type='text/css'>
…
</head>
Add the second piece of code in style.css file of your theme.
h1 { font-family: 'Just Me Again Down Here', arial, serif; }
The default code Google provides is for the h1 tag. You can use it on any other text by replacing its font-family attribute.
That’s it! Refresh you blog to view the new font in effect.
Add Google Web Fonts to WordPress Using WordPress Plugin
In this method we will be using a WordPress plugin called WP Google Fonts.
Search and install “WP Google Fonts” plugin in WordPress plugin installer or download it and upload the plugin using FTP to your server. Activate it and go to plugin settings, found under “Settings –> Google Fonts.”
This plugin makes the task easy as you are not required to edit any files. All you got to do is select a font and the element you want to assign it to.
If you are familiar with CSS, you can customize the look of your font further by writing the codes in the “Custom CSS” box, but that’s optional.
Once you are happy with everything, hit “Save” to make changes.
WP Google Fonts allows you to use a total of 6 fonts from Google Font Directory. These can be assigned to different elements on your your blog using the 6 Font Options provided. It also gives you a preview of all available fonts at the bottom of the same page.
Add Google Web Fonts to any Website
To use Google Web Fonts on any other website, just add the first piece of code we got from the Font Directory inside your page head tags.
Then add the CSS code in between the style tags and add to whatever selector you want.
Final example:
<link href='http://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Just Me Again Down Here', serif;
font-size: 36px;
}
</style>
<h1>SumTips</h1>
To try out, you can copy and paste the above HTML into an index.html.
Use Google Web Fonts Only on a Particular Text
If you don’t want to use the font on your entire site and only on some bits of texts, add the text in between the following codes:
<div style="font-family: 'FontName', serif;">
and
</div>
Example:
<div style="font-family: 'Just Me Again Down Here', serif;">
TEXT
</div>
Google Web fonts is compatible with the following browsers:
- Google Chrome 4.249.4+
- Mozilla Firefox 3.5+
- Apple Safari 3.1+
- Microsoft Internet Explorer 6+