How to Add Google Fonts to Joomla Template

The Google Fonts directory is one of the most exciting developments in web typography to come about it recent time. Google Fonts allows us as blog developers and users to use exotic eye catching fonts in our Joomla Templates. Previously it has been possible to use a handful of bold exotic fonts in our themes but it required tonnes of JavaScript code which put a heavy burden on our bandwidth and page loading times. The new service offered by Google Fonts has come along and saved us once again.

How to manually add Google Fonts to our Joomla Templates

In the first part of the article I am going to show to manually ad the code ( Cascading Style Sheet references and CSS styles ) to your Joomla Templates.

1, First of all visit the Google Fonts Directory and find the font you are interested in using.
2, Once you have found the font you want to use click on the link to the right of the font that states: Quick-use. This will expand the selection of the font and display the code you will need to add to your theme.
3, Scroll down the page until you can see the Cascading Style Sheet (CSS) reference that you need to use. It will look like this:
{jb_greenbox}<link href='http://fonts.googleapis.com/css?family=Gentium+Basic' rel='stylesheet' type='text/css'>{/jb_greenbox}
4, Navigate to your current theme directory.
5, Find the file index.php and open it in your html editor
6, In the index.php file navigate to the part of the file where your theme CSS file is included. Below the theme CSS file reference add the new Google Fonts css reference. Your code should look similar to this:
{jb_greenbox}<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link href=‘http://fonts.googleapis.com/css?family=Gentium+Basic’ rel=‘stylesheet’ type=‘text/css’>{/jb_greenbox}
7, Almost done. Our final step now is to determine which HTML element we want to allocate our Google Fonts to. For example you might want to allocate the new Google Font to the h1 element. To do this open up your theme css document in your html element. Normally style.css.
8, Lets say you want to use the new font with the h1 element. Create a new css rule and add this code to the bottom of the style.css file:
{jb_greenbox}h1 {
font-family: ‘Gentium Basic’, serif;
}{/jb_greenbox}
9, That’s it! Complete. Now you just need to upload the modified files to your web host for the changes to take effect.

Using Joomla Plugin to add Google Fonts to our Template:

The great thing about using Joomla as there are nearly always plugins available for any task you want to achieve. If you are not comfortable or confident you can always download and install one of the available plugins to add the Google Fonts code for you.

HD-Gfonts (Compatibility Joomla 1.5 -1.7 - 2.5)
HD-Gfonts is a simple plugin that allows you to replace the standard fonts of your headings with a wider range of fonts from the Google Font Directory. There are currently over 250 fonts

Who Read This Article Also Interested:::