Written by Kristof Loyens
This tutorial will show you the easy way to add Google fonts and bring Rich typography to your Joomla websites in no time.
The Google font directory is a collection of fonts hosted on Google servers and available for use on your website under an open source license. It works on all browsers (even IE6) and unlike flash embedded systems the fonts are completely search engine friendly.
We are going to use a Free plug-in developed by Hyde Design.
There are over 400 fonts to choose from. (including bold, italic and bold-italic variations) Cantarell, Cardo, Crimson Text, Cuprum, Droid Sans, Droid Sans Mono, Droid Serif, IM Fell Double Pica, Inconsolata, Josefin Sans Std Light, Lobster to name but a few of the most well known.
There are two versions available of this plug-in one for Joomla 1.5 and Joomla 2.5.
For this tutorial we will be using a Joomla 2.5 clean install with standard content already present and the 2.5 plug-in from Hyde Design.
You can download the plug-in here. Make sure you download the correct version of this plug-in to match your Joomla installation.
Screenshot of the download page below.
Your Joomla 2.5 install should look like the screenshot below.
First of all we log into the backend of our Joomla Demo website and install the plug-in we downloaded earlier.
Go to the Extension manager install menu.
And in the Upload package File window you select the zip file containing the plug-in.
Hit the Upload & Install button.
After the upload and install a confirmation window will let you know the plug-in was installed successfully.
We can now enter the backend of the plug-in and check out its settings.
Open the plug-in manager in the Joomla backend.
1,500 Gorgeous Hand Drawn Vector Icons
And type “HD” in the search field off available plugins. Then hit Search.
This will immediately show up the HD Fonts plug-in in your list. As we can see from the screenshot above the plug-in hasn’t been activated yet.
So let’s activate it first before delving deeper into the settings.
Select the box in front of the plug-in and hit the Enable button. The indicator under the status should now have turned from red to green.
And a “Plug-in successfully enabled” message should appear. This means the plug-in is active on your website and ready to be used.
Now let’s check out the settings of the plug-in.
Click on the System – HD Gfont link and enter the settings.
You are now ready to rock and roll your Joomla website into using Google Webfonts.
Now we enter the second part of this tutorial. Changing the fonts to a google webfont of your choice.
In this case we will change all unordered lists (ul) to the Lobster font.
First of all. Select the Lobster font from the Dropdown menu.
As you can see. The Class part holds the description of the class you want to change to the webfont.
Type in the ul class in the Class textfield, like in the screenshot below.
Hit the Save button at the top of the screen.
Your now good to go and check out your frontend view in a webbrowser. All your unordered lists should now be changed into the Lobster font.
Take a look at what it looks like now and how it looked before screenshot below.
If you want to add a second font to the webpage. Just enable the second font setting and repeat the above procedure.
If you want to add multiple classes/ tags from your template to the same font, just add a comma and set the class you want to change. Here we used the code: “#nav h3 “ to alter the font of the h3 tag in our menu on our first page. We also added some additional CSS to change its color.
Tip: To find out which CSS is influencing an element on your page. Look in the source code of the page your working on.
This is what our menu looks like after we implemented these settings.
You can see that now our nav H3 header has changed font and changed color together with our unordered list.
However our unordered list has not taken the additional CSS parameters. Here is why.
The menu has links attached to it. So we will have to add the class for the menu list a:link and a:visited style too.
Code: “ul.menu li a:link, ul.menu li a:visited “
Add these to our Class text field, after adding a comma right after h3.
Now our menu will look like this. All menu elements have taken over the Additional CSS and the Lobster font.
Now you can play around with your templates fonts as much as you like.
Disabling the plug-in will immediately disable the Google web fonts in your site and they will all revert back to the fallback fonts specified in your template.
I hope you found this tutorial helpful in giving your Joomla websites a rich font experience.