Tutorial - how to add custom fonts in Rocket Theme

This is a little tutorial on how to add custom fonts to the font-settings drop-down in the template parameters.

In this example i will explain how you can add the custom font Bebas (used in the reaction template) to the other gantry templates. i will be using Juxta template in my example.

1. Adding the font files

a) Download the reaction template and locate the following font files for the Bebas font
../templates/rt_reaction_j15/fonts/Bebas.eot
../templates/rt_reaction_j15/fonts/Bebas.ttf

b) Use your ftp or file manager to paste the 2 files to the same location on your install, if you are using for example the Juxta template, the following location is correct:
../templates/rt_juxta_j15/fonts/..
please note: you may have to create the "font" directory manually if it is not present.

2. Adding the necessary css code

Open your ..templates/rt_juxta_j15/css/template.css file and copy/paste the following code at the end:

1. /* Adding Font Bebas */
2. @font-face {font-family: Bebas;src: url(../fonts/Bebas.eot);}
3. @font-face {font-family: "Bebas";src:local("Bebas"), url(../fonts/Bebas.ttf) format("truetype");}
4. .font-family-bebas h1, .font-family-bebas h2.title, .font-family-bebas .rt-joomla .user legend, .font-family-bebas .rt-joomla .contact legend, .font-family-bebas .componentheading , .font-family-bebas .edit-article legend {font-family: Bebas,Helvetica,Arial,sans-serif;letter-spacing: normal;font-weight: normal; 

3. Adding the info to the font-settings dropdown

a) Open your ../templates/rt_juxta_j15/templateDetails.xml file and locate the following code:

1. <param name="family" type="selectbox" default="georgia" label="FONT_FAMILY" description="" isbodyclass="true" setbyurl="true" setinsession="true" setbysession="true" setincookie="true" setbycookie="true">
2.     <option value="geneva">Geneva</option>
3.     <option value="georgia">Georgia</option>
4.     <option value="helvetica">Helvetica</option>
5.     <option value="lucida">Lucida</option>
6.     <option value="optima">Optima</option>
7.     <option value="palatino">Palatino</option>
8.     <option value="trebuchet">Trebuchet</option>
9. </param>

b) Change it to:

 

1. <param name="family" type="selectbox" default="georgia" label="FONT_FAMILY" description="" isbodyclass="true" setbyurl="true" setinsession="true" setbysession="true" setincookie="true" setbycookie="true">
2.     <option value="bebas">Bebas</option>
3.     <option value="geneva">Geneva</option>
4.     <option value="georgia">Georgia</option>
5.     <option value="helvetica">Helvetica</option>
6.     <option value="lucida">Lucida</option>
7.     <option value="optima">Optima</option>
8.     <option value="palatino">Palatino</option>
9.     <option value="trebuchet">Trebuchet</option>
10. </param>

Bebas should now be added to your font-settings drop-down and show on the front-end of your Juxta site when selected.