Support Forum

Custom fonts

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
Attachments:

Accepted Answer

Tuesday, May 31 2016, 07:32 PM - #Permalink
Hi Stefan,

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.
The reply is currently minimized Show
Responses (4)
  • Accepted Answer

    Wednesday, June 01 2016, 12:53 PM - #Permalink
    Hi Ivo,

    Wow, thanks, I followed your instructions and it works... great!
    I missed the dependencies instruction.

    Kind regards,
    Stefan
    The reply is currently minimized Show
  • Accepted Answer

    Wednesday, June 01 2016, 02:10 PM - #Permalink
    No problem Stefan, I'm glad it works ;)
    The reply is currently minimized Show
  • Accepted Answer

    Friday, November 30 2018, 08:21 PM - #Permalink
    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
    The reply is currently minimized Show
  • Accepted Answer

    Sunday, December 02 2018, 05:51 PM - #Permalink
    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.
    The reply is currently minimized Show
Your Reply

Become an insider | Subscribe to our Newsletter
Subscribe to our mailing list and stay up-to-date with all our awesome releases, latest updates and amazing discount offers!