Tutorial - how to add custom fonts
-
-
- prim
- Preeminent Rocketeer
- Posts: 17290
- Thanks: 217
-
### HOW TO ADD A NEW FONT TO YOUR OLD GANTRY TEMPLATE ###
Notice: This tutorial is for OLD Gantry templates. If you are using Gantry 4 or newer then click the link below:
www.rockettheme.com/forum/index.php?f=39...v=viewtopic#p1019127
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:
This image is hidden for guests.
Please log in or register to see it.
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:
This image is hidden for guests.
Please log in or register to see it.
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. Create a new text file and copy/paste the code below and save the file with the name customcss.php
And as usual the format should be UTF-8 NO BOM.
customcss.php should contain 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");
}
}
9. Move customcss.php to /templates/rt_template/features/
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 - Please reply with a direct link to the issue & create a new thread for each new issue.
A template is only as good as the content that goes into it
- DanG
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
just a little footnote
you can add this to your css-file
.customstyle {font-family: "VolkhovBoldItalic;",Helvetica,Arial,sans-serif !important;}
to use it in a class like
<p class="customstyle">some cool text</p>
so if you want to change the font you only need to change that one class instead of editing all those inline rules.
well done Pär!
-
-
-
- Quartermaster
- Rocketeer
- Posts: 54
- Thanks: 0
-
I am installing PT Sans and PT Sans Narrow.
Do they need to be added to the template-options.xml file to be accessible?
<fields name="font" type="chain" label="FONT_SETTINGS"> <field name="family" type="fonts" default="modulus" label="FONT_FAMILY" isbodyclass="true" setbyurl="true" setinsession="true" setbysession="true" setincookie="true" setbycookie="true"> <option value="ptsansregular">PTSansRegular</option> <option value="modulus">Modulus</option> <option value="geneva">Geneva</option> <option value="georgia">Georgia</option> <option value="helvetica">Helvetica</option> <option value="lucida">Lucida</option> <option value="optima">Optima</option> <option value="palatino">Palatino</option> <option value="trebuchet">Trebuchet</option> </field>
-
-
-
- Quartermaster
- Rocketeer
- Posts: 54
- Thanks: 0
- How do you insert code in a post?
-
-
-
- prim
- Preeminent Rocketeer
- Posts: 17290
- Thanks: 217
-
You only have to edit to the XML if you want the options inside the template settings.
It does not affect the practical functionality and use. - Please reply with a direct link to the issue & create a new thread for each new issue.
A template is only as good as the content that goes into it - DanG
-
-
-
- prim
- Preeminent Rocketeer
- Posts: 17290
- Thanks: 217
-
Click on "Post Reply" and then enter some text in the text-field.
Mark the text and press the code button.
The text will look like this
You can change the
[code=text] to [code=html] or [code=css] and [code=php] and so on to get different markups.
- Please reply with a direct link to the issue & create a new thread for each new issue.
A template is only as good as the content that goes into it - DanG
-
-
-
- Quartermaster
- Rocketeer
- Posts: 54
- Thanks: 0
-
Okay, below is my "custom.css" code for PT Sans, which has eight variations:
PT Sans (Regular, Bold, Italic, and Bold Italic)
PT Sans Narrow (Regular and Bold)
PT Sans Caption (Regular and Bold)
I want to do two things. Replace some of the template (module) text with PT Sans, for instance Title1 (I assume if I edit the style it will take effect.
and the default content (mainbody) with PT Sans, which I thought was under /* FONTS */ in the template.css file.
Can you tell me, In which CSS file and how do I format entries that will give me the three main families in the fonts drop-down, and their variations when I check "bold" in the RokPad editor? (Or do I have to apply bold, italic, etc., as a totally separate style?)
/* PT Sans Custom Font CSS*/
@font-face {
font-family: 'PTSansRegular';
src: url('../fonts/PTS55F-webfont.eot');
src: url('../fonts/PTS55F-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/PTS55F-webfont.woff') format('woff'),
url('../fonts/PTS55F-webfont.ttf') format('truetype'),
url('../fonts/PTS55F-webfont.svg#PTSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PTSansBold';
src: url('../fonts/PTS75F-webfont.eot');
src: url('../fonts/PTS75F-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/PTS75F-webfont.woff') format('woff'),
url('../fonts/PTS75F-webfont.ttf') format('truetype'),
url('../fonts/PTS75F-webfont.svg#PTSansBold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PTSansItalic';
src: url('../fonts/PTS56F-webfont.eot');
src: url('../fonts/PTS56F-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/PTS56F-webfont.woff') format('woff'),
url('../fonts/PTS56F-webfont.ttf') format('truetype'),
url('../fonts/PTS56F-webfont.svg#PTSansItalic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PTSansBoldItalic';
src: url('../fonts/PTS76F-webfont.eot');
src: url('../fonts/PTS76F-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/PTS76F-webfont.woff') format('woff'),
url('../fonts/PTS76F-webfont.ttf') format('truetype'),
url('../fonts/PTS76F-webfont.svg#PTSansBoldItalic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PTSansNarrowRegular';
src: url('../fonts/../fonts/PTN57F-webfont.eot');
src: url('../fonts/PTN57F-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/PTN57F-webfont.woff') format('woff'),
url('../fonts/PTN57F-webfont.ttf') format('truetype'),
url('../fonts/PTN57F-webfont.svg#PTSansNarrowRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PTSansNarrowBold';
src: url('../fonts/PTN77F-webfont.eot');
src: url('../fonts/PTN77F-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/PTN77F-webfont.woff') format('woff'),
url('../fonts/PTN77F-webfont.ttf') format('truetype'),
url('../fonts/PTN77F-webfont.svg#PTSansNarrowBold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PTSansCaptionRegular';
src: url('../fonts/PTC55F-webfont.eot');
src: url('../fonts/PTC55F-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/PTC55F-webfont.woff') format('woff'),
url('../fonts/PTC55F-webfont.ttf') format('truetype'),
url('../fonts/PTC55F-webfont.svg#PTSansCaptionRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PTSansCaptionBold';
src: url('../fonts/PTC75F-webfont.eot');
src: url('../fonts/PTC75F-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/PTC75F-webfont.woff') format('woff'),
url('../fonts/PTC75F-webfont.ttf') format('truetype'),
url('../fonts/PTC75F-webfont.svg#PTSansCaptionBold') format('svg');
font-weight: normal;
font-style: normal;
}
-
-
-
- prim
- Preeminent Rocketeer
- Posts: 17290
- Thanks: 217
-
1. You are using Google Fonts.
2. Custom.css is not loaded. - Please reply with a direct link to the issue & create a new thread for each new issue.
A template is only as good as the content that goes into it - DanG
-
-
-
- Quartermaster
- Rocketeer
- Posts: 54
- Thanks: 0
- I disabled that now, to install them manually.
-
-
-
- Xsbucks007
- Sr. Rocketeer
- Posts: 110
- Thanks: 1
- That's what i was exactly after, Thanks so much!!
-
Time to create page: 0.080 seconds