Menu

Joomla Blog

Tutorials, reviews, case studies and other tips to help website owners and website developers master the Joomla content management system.

Add flair to your headings with Google Web Fonts

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:

Adding the H1 tag


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.)

How to change classes

4. Click "save."

5. Now let's check the frontend to see the results:

Frontend view

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:

Additional CSS

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:

20110420_5

This will be the result:

Frontend

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:

Additional fonts


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.

Rate this blog entry:
Create anchor links to article titles
Review: Tienda Ecommerce

Related Posts

 

Comments 2

Guest - Dejansoftware on Thursday, 23 August 2012 22:00

Hi Richard,

one question regarding this topic, is it possible to change menu items font?

0
Hi Richard, one question regarding this topic, is it possible to change menu items font?
Richard Pearce on Friday, 24 August 2012 17:11

Not easily. Sometimes template providers have an option in the template settings. Otherwise you need to do this in the template CSS file.

0
Not easily. Sometimes template providers have an option in the template settings. Otherwise you need to do this in the template CSS file.

Free Joomla TutorialLearn Joomla for free with our 16 lesson, 2 hour course.

Get Started