### HOW TO ADD A NEW FONT TO YOUR GANTRY TEMPLATE ###

Note: The reason we are doing all these steps is to make the code more future proof against template- & Gantry updates

1. Go to www.fontsquirrel.com
2. Select a font that you like. In this example i am using this font: www.fontsquirrel.com/fonts/volkhov
3. Click on @font-face Kit
4. Choose a Subset from the drop-down menu:

font-face.Kit.Choose.a.Subset.png

Important: You have to select the correct subset (or select Don't subset) otherwise non-English characters will not display correctly!

5. Choose Font Formats and press the Download button:

choose.font.formats.png

6. Extract the fonts into /templates/rt_template/fonts:

Volkhov-Italic-OTF-webfont.eot
Volkhov-Italic-OTF-webfont.svg
Volkhov-Italic-OTF-webfont.ttf
Volkhov-Italic-OTF-webfont.woff
Volkhov-BoldItalic-OTF-webfont.eot
Volkhov-BoldItalic-OTF-webfont.svg
Volkhov-BoldItalic-OTF-webfont.ttf
Volkhov-BoldItalic-OTF-webfont.woff
Volkhov-Bold-OTF-webfont.eot
Volkhov-Bold-OTF-webfont.svg
Volkhov-Bold-OTF-webfont.ttf
Volkhov-Bold-OTF-webfont.woff
Volkhov-Regular-OTF-webfont.eot
Volkhov-Regular-OTF-webfont.svg
Volkhov-Regular-OTF-webfont.ttf
Volkhov-Regular-OTF-webfont.woff

7. Create a new text file and copy this code from stylesheet.css (from the zip you just downloaded):

@font-face {
font-family: 'VolkhovRegular';
src: url('Volkhov-Regular-OTF-webfont.eot');
src: url('Volkhov-Regular-OTF-webfont.eot?#iefix') format('embedded-opentype'),
url('Volkhov-Regular-OTF-webfont.woff') format('woff'),
url('Volkhov-Regular-OTF-webfont.ttf') format('truetype'),
url('Volkhov-Regular-OTF-webfont.svg#VolkhovRegular') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'VolkhovItalic';
src: url('Volkhov-Italic-OTF-webfont.eot');
src: url('Volkhov-Italic-OTF-webfont.eot?#iefix') format('embedded-opentype'),
url('Volkhov-Italic-OTF-webfont.woff') format('woff'),
url('Volkhov-Italic-OTF-webfont.ttf') format('truetype'),
url('Volkhov-Italic-OTF-webfont.svg#VolkhovItalic') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'VolkhovBold';
src: url('Volkhov-Bold-OTF-webfont.eot');
src: url('Volkhov-Bold-OTF-webfont.eot?#iefix') format('embedded-opentype'),
url('Volkhov-Bold-OTF-webfont.woff') format('woff'),
url('Volkhov-Bold-OTF-webfont.ttf') format('truetype'),
url('Volkhov-Bold-OTF-webfont.svg#VolkhovBold') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'VolkhovBoldItalic';
src: url('Volkhov-BoldItalic-OTF-webfont.eot');
src: url('Volkhov-BoldItalic-OTF-webfont.eot?#iefix') format('embedded-opentype'),
url('Volkhov-BoldItalic-OTF-webfont.woff') format('woff'),
url('Volkhov-BoldItalic-OTF-webfont.ttf') format('truetype'),
url('Volkhov-BoldItalic-OTF-webfont.svg#VolkhovBoldItalic') format('svg');
font-weight: normal;
font-style: normal;

}

Note: The @font-face code will differ depending on the fonts that you choose.
Note: It is very important that you get the url part right. Below is an example of a correct pathway (if you have put your fonts into /templates/rt_template/fonts):

url('../fonts/Volkhov-BoldItalic-OTF-webfont.woff') format('woff'),

Name the text file custom.css and save it (as UTF-8 NO BOM) in /templates/rt_template/css

8. Copy customcss.php to /templates/rt_template/features/

customcss.php contains this code:

<?php
/**
* @package Custom Feature (Add custom CSS file) - RocketTheme
* @version April 1, 2012
* @author RocketTheme www.rockettheme.com
* @copyright Copyright (C) 2007 - 2012 RocketTheme, LLC
* @license www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
*
*
*/

defined('JPATH_BASE') or die();

gantry_import('core.gantryfeature');

class GantryFeatureCustomCSS extends GantryFeature {
var $_feature_name = 'customcss';

function isEnabled() {
return true;
}

function isInPosition($position) {
return false;
}

function init() {
global $gantry;

// This makes Gantry load our custom.css
$gantry->addStyle("custom.css");

}

}

When you view the HTML source of your site you should see something like this:

<link rel="stylesheet" href="/templates/rt_template/css/custom.css" type="text/css" />

This means that Gantry loads the CSS file correctly. If you don't see that code then try to clear your browser's cache or the Joomla cache.


Done!

When you want to use the font in your content you can use something like this:

<p style="font-family: VolkhovBoldItalic;">Color Chooser provides a rich administrative interface for controlling the template's styles, with a interactive mootools powered popup to select colors, whether for the background or text colors, as well as selectors for patterns and overlays.</p>

*** IIS Notice ***

MIME types in IIS 6 are configured to deliver EOT (used by IE) and TTF files by default.

WOFF (Chrome/Firefox and others) and SVG (iPhone & iPad) will not be sent to your browser by IIS.

Simply add the following MIME type declarations via the IIS Manager (HTTP Headers tab of the website properties):

.woff application/x-woff
.svg image/svg+xml

In your tutorial above, everything was good up until the step said: 8. Copy customcss.php to /templates/rt_template/features/. Where? Where is customcss.php? Do I create it? If so, in the same format utf8 with NO BOM? Again - you guys are experts and sometimes you may assume we know these tiny things. I'm learning - but have a hard time putting it all together with all these files and where things go, etc... I know I'm not alone.

prim wrote:
.