How to add new fonts to the HD-Gfonts plugin

 

Learn how to add new fonts to the HD-Gfonts plugin


 


 

Download for Joomla 2.5

-Older versions-

 


what is this? | what are google fonts? | after installing | will it work on all templates? | how do i add new google fonts?


 

When the HD-Gfonts plugin was released last year there were only a handful of fonts available on the Google Font Directory. There are now over 200 fonts with approximately 3-4 new fonts appearing every week. Although this is great news for the HD-Gfont plugin users it is turning into a weekly chore for me to keep it up to date.

In the event that I get hit by a bus or (worse) get bored of updating the Gfonts plugin here’s a short guide to how you can include a new font yourself.

First of all go to the google font directory at http://www.google.com/webfonts/

choose a font

Select your chosen font (in this case we’ll use “Love Ya Like A Sister” as an example) and click on the “Use this font” tab to display the HTML and CSS codes.

The two elements you will need to grab are the name of the font and an element of the URL.

 

font codes


The name of the font is displayed in the CSS example above.
So in this case it’s “Love Ya Like A Sister”

The element of the URL is the part of the HTML example above that appears after “?family=”
So in this case it’s “Love+Ya+Like+A+Sister&v1”

This is all that you need from the Google Font Directory and from now on I’ll refer to them as the goofont and the goofurl.

Download the HD-Gfonts plugin and unzip the file to your desktop.
There are only two files in the plugin: an XML file and a PHP file.

Open up the XML file and you’ll see that the fonts begin to be listed at around line 20.

gfont xml

Add a new line following the format above. It is important that the value matches the goofont value exactly. So in this case we add…


<option value=”Love Ya Like A Sister”>Love Ya Like A Sister </option>


Then save the XML file and open the PHP file.

You’ll see that the fonts in this file begin to be listed at around line 27

gfont php

Add a new line following the format above, including the goofont and the goofurl. So in this case we add…

 

elseif ($goofont1==”Love Ya Like A Sister”)  {$goofurl_1=”Love+Ya+Like+A+Sister&v1”;}

 

Then save the PHP file.
Finally zip the files back up into one package and install via the Joomla installer (or if already installed, FTP the files to replace the existing ones).

That’s all there is to it.

Web Design & Development
07845 950063
This email address is being protected from spambots. You need JavaScript enabled to view it.