Hi all,
I would like to add a custom font for my website and I tried to use this font in the menu. Unfortunately the font I have to use is not a Google font.
In an earlier post I read that following the G5-documentation would help - but I have a question about this:
I started from 'Installing a Custom Font: Example' at http://docs.gantry.org/gantry5/tutorials/fonts. (so not adding a font to the font picker, but adding a custom font)
I uploaded the 4 versions of my font 'BrandonRegular'. [see the attached file: font1]
My SCSS looks like: [see the attached file: font2]
I hope this is ok, so far?
Then, the instruction is:
'Once you have added the font to your theme's custom content directory, you can apply it to your site. For example, if you wanted the title of a Particle to appear in the Bloody font, you would reference it in the Particle's Twig file.'
I think I have to go to the menu particle in the Base Outline, but then I get stuck. Does anyone have a suggestion about the instruction about the Twig file?
Thanks very much in advance!
Stefan
I would like to add a custom font for my website and I tried to use this font in the menu. Unfortunately the font I have to use is not a Google font.
In an earlier post I read that following the G5-documentation would help - but I have a question about this:
I started from 'Installing a Custom Font: Example' at http://docs.gantry.org/gantry5/tutorials/fonts. (so not adding a font to the font picker, but adding a custom font)
I uploaded the 4 versions of my font 'BrandonRegular'. [see the attached file: font1]
My SCSS looks like: [see the attached file: font2]
I hope this is ok, so far?
Then, the instruction is:
'Once you have added the font to your theme's custom content directory, you can apply it to your site. For example, if you wanted the title of a Particle to appear in the Bloody font, you would reference it in the Particle's Twig file.'
I think I have to go to the menu particle in the Base Outline, but then I get stuck. Does anyone have a suggestion about the instruction about the Twig file?
Thanks very much in advance!
Stefan
Accepted Answer
Hi Stefan,
Here's what you need to do:
1. Copy the 4 font files to
2. Create the custom.scss file and add the following code there (use
3. Target the HTML element that you want and give it a "font-family". In your case you want to target
4. "Recompile CSS" under the "Styles" tab in the "Base" outline so the custom.scss file can be picked up.
Have a look at this video, it show everything. Make sure you watch the video in Fullscreen and FullHD for better quality.
Here's what you need to do:
1. Copy the 4 font files to
TEMPLATE_DIR/custom/fonts/ as explained in the official G5 documentation.2. Create the custom.scss file and add the following code there (use
@import "dependencies"; instead of @import "vendor/bourbon/bourbon";, the documentation is outdated.@import "dependencies";
@include font-face('BloodyNormal', 'gantry-theme://fonts/BLOODY-webfont');
.font-family-bloody {
font-family: 'BloodyNormal',Helvetica,Arial,sans-serif;
font-weight: normal;
font-style: normal;
}3. Target the HTML element that you want and give it a "font-family". In your case you want to target
.g-main-nav. So, add the following code in the custom.scss file, below the above code:.g-main-nav {
font-family: "BloodyNormal";
}4. "Recompile CSS" under the "Styles" tab in the "Base" outline so the custom.scss file can be picked up.
Have a look at this video, it show everything. Make sure you watch the video in Fullscreen and FullHD for better quality.
Responses (4)
-
Accepted Answer
-
Accepted Answer
Dear Ivo,
related to custom fonts topic I would like to ask the followings:
- if a font is a Google font why couldn't use it with Gantry Font Picker? For example: Raleway fonts family (light, bold, etc.).
https://fonts.google.com/specimen/raleway
Only "thin" and "dot" types are available via Gantry admin menu.
- in this case should we use the above mentioned font installation?
- what if Raleway has only ttf format?
Thanks,
Tegger -
Accepted Answer
Hi Tegger,
These questions are not related to a particular theme, they are related to the Gantry 5 framework in general.
Some of the Google Fonts (or some variations like "Light", "Bold", etc) are not available in the Gantry 5 Font Picker because they are not yet imported.
I mean, the Gantry 5 framework is not up-to-date with all Google Fonts.
You might want to open a new issue on Github and ask the Gantry 5 developers when they will update the Google Fonts library in Gantry 5.
Have a look at this issue for example.
If you want to use a font (or variation of a font) that is not available in G5 Font Picker, then yes you need to follow the above procedure.
A font cannot have just TTF format.
You might want to download the font from another place where they provide all formats in the package.
Your Reply
Please login to post a reply
You will need to be logged in to be able to post a reply. Login using the form on the right or register an account if you are new here.
Register Here »
The Joomla!® name is used under a limited license from Open Source Matters in the United States and other countries.
InspireTheme is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.
InspireTheme is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.