Tutorial - how to add custom fonts
-
-
- Orpheus2510
- Rocketeer
- Posts: 74
- Thanks: 1
- Thank you, Prim.
- Greetings, Orpheus
-
-
-
- gavinj1999
- Newbie
- Posts: 15
- Thanks: 0
-
Thanks Prim
I have custom fonts now easily working in my Lumiere template
-
-
-
- findittexas
- Sr. Rocketeer
- Posts: 164
- Thanks: 0
- I'm having problems with this too, The client has chosen a font and supplied it to us, but it only has 8 ttf fonts in it and is not available on fontsquirrel. The font he has chosen is MyriadAppleRegular. can anyone give me heads up on how I can add these to the template and make them selectable in JCE?
-
-
-
- MidSouthCon
- Jr. Rocketeer
- Posts: 46
- Thanks: 0
-
prim wrote:
You can read all about how less works and how to add less-files in this tutorial: www.gantry-framework.org/documentation/joomla/advanced/less-css
Did y'all break something on the Gantry site or turn off SEO links? Many of the links to the Gantry docs and tutorials posted in the forums here like the one above no longer work. For instance, in order to get to the page in the above quote, the URL is now www.gantry-framework.org/documentation/j...advanced/less_css.md
-
-
-
- Andy Miller
- Preeminent Rocketeer
- Posts: 9919
- Thanks: 96
- Web Kahuna
- Yah we moved to a new github+markdown documentation system, urls will be be different.
-
-
-
- Selim Rana
- Newbie
- Posts: 15
- Thanks: 0
- Senior Web Designer @ bdthemes ltd
- How can i add multiple font setting for menu, body, heading. more details post here: www.rockettheme.com/forum/index.php?f=33..._v=viewtopic#p973673
- Best Regards
Selim Rana
-
-
-
- Carlos Zambrano
- Jr. Rocketeer
- Posts: 45
- Thanks: 0
-
I follow the steps with font Mandevilla, but when i view home page I don't see the code:
<link rel="stylesheet" href="/templates/rt_template/css/custom.css" type="text/css" />
The template I'm using is the Metropolis and it has an additional folder called css-compiled.
When I use HMTL code
<p style="font-family: VolkhovBoldItalic;">Color Bla bla bla bla bla bla </p>
In my website I don't see the Mandevilla Font.
WEbsite link: tiendageek.com.co/miobebe
Test with hmtl Code: tiendageek.com.co/miobebe/index.php/convenios
Thanks
-
-
-
- prim
- Preeminent Rocketeer
- Posts: 17290
- Thanks: 217
-
### HOW TO ADD A NEW FONT TO YOUR GANTRY 4+ TEMPLATE ###
Note: The reason we are doing all these steps is to make the code more future proof against template- & Gantry updates
In this example I am using the Corvus template and Gantry 4+.
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_corvus/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_corvus/fonts):
url('../fonts/Volkhov-BoldItalic-OTF-webfont.woff') format('woff'),
Name the text file rt_corvus-custom.css and save it (as UTF-8 NO BOM) in /templates/rt_corvus/css
Done!
When you view the HTML source of your site you should see something like this:
<link rel="stylesheet" href="/templates/rt_corvus/css/rt_corvus-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
-
-
-
- Carlos Zambrano
- Jr. Rocketeer
- Posts: 45
- Thanks: 0
-
Thank you so much, I have a mistake in my CSS i just add @charset "utf-8"; to the first line and it works.
If i want to use this font for Menu how can i do?
-
-
-
- Carlos Zambrano
- Jr. Rocketeer
- Posts: 45
- Thanks: 0
-
And why the font has more resolution in Firefox adn IE than in Chrome.?
Image: tiendageek.com.co/miobebe/images/fuente.png
-
Time to create page: 0.066 seconds