Have you ever wanted to use a specific font on your website, only to be thwarted by the limitations of web-friendly fonts and CSS?
Even intermediate web developers probably know that you can call any font from CSS. Let's say you wanted to use the font Droid Sans for your h1 class. The CSS would look like this:
h1 {
font-family:"Droid Sans";
}
But your website will only be able to display that font if the computer being used to view the page actually has that font on its hard drive. If the computer doesn't have that font, then the web browser will substitute another font.
There are several solutions to this problem. Today we're going to look at a plugin called HD-Gfonts that gives developers access to a folder full of handy fonts made available by Google. Download the plugin here.
The download link is at the top-right of the page. Plugins for both Joomla 1.5 and 1.6 are available.
Install the plugin as you would any other extension. Review our extension tutorial if necessary.
Once the plugin is installed, go to the Plugin Manager. The plugin will be listed under: System - HD Gfont. Open the plugin by clicking its name.
Here's how to use the plugin:
1. Enable the plugin.
2. The plugin gives you control over five possible font styles on your website. For the purposes of this tutorial, let's only look at the first font class, which by default is set to h1:
3. But let's say you want to change the font of your article titles. That class is called:
.contentheading
So in place of "h1," type ".contentheading" as shown. You can choose from more than 160 fonts listed in the drop-down menu. (I changed the font to "Covered by Your Grace" because it's such a unique font – it'll be easier to tell that the plugin is working.)
4. Click "save."
5. Now let's check the frontend to see the results:
It worked! But let's say we wanted even more control over the style of the article titles. This plugin makes it easy. Go back to the edit page for this plugin and check out this field:
Here's where some basic knowledge of CSS will come in handy. You can adjust the look and feel of this style. For example, let's say you wanted the article titles to be the color red and 24 pixels in height. Add in these styles:
This will be the result:
Note: There are dozens of other ways you can control the look and feel of elements on your website with CSS.
If you want to control other styles on your site, simply activate another font by the clicking the "yes" button for the next font style:
Note: Like it says above, try to change as few fonts as possible, because it'll increase your page-load times.
Last, let's talk about the advantages and disadvantages of using this plugin.
ADVANTAGES
• Easy to install and use.
• Requires no hacking – you won't have to insert any tags into your code.
• Works in conjunction with CSS.
• SEO-friendly. This is an important advantage. Most font solutions generate Flash-based images on the fly, essentially replacing your fonts with graphics, which aren't as SEO-friendly. HD-Gfonts generates actual text in the font you choose.
DISADVANTAGES
• Like all font-replacement solutions, it will increase the page-load time for your site.
• You're limited to the 160-plus fonts listed. There's no way to add any more, so if you need to use a font not listed, you'll have to find a different solution.