0
Welcome Guest! Login
0 items Join Now

Tutorial - how to add custom fonts

Last Post
Search Topic
    • Kat05's Avatar
    • Kat05
    • Preeminent Rocketeer
    • Posts: 25898
    • Thanks: 334

    Tutorial - how to add custom fonts

    Posted 14 years 6 months ago
    • Hi all,

      This is a little tutorial on how to add custom fonts to the font-settings drop-down in the template parameters.
      This image is hidden for guests.
      Please log in or register to see it.

      In this example i will explain how you can add the custom font Bebas (used in the reaction template) to the other gantry templates. i will be using Juxta template in my example.

      1. Adding the font files

      a) Download the reaction template and locate the following font files for the Bebas font
      ../templates/rt_reaction_j15/fonts/Bebas.eot
      ../templates/rt_reaction_j15/fonts/Bebas.ttf

      b) Use your ftp or file manager to paste the 2 files to the same location on your install, if you are using for example the Juxta template, the following location is correct:
      ../templates/rt_juxta_j15/fonts/..
      please note: you may have to create the "font" directory manually if it is not present.

      2. Adding the necessary css code

      Open your ..templates/rt_juxta_j15/css/template.css file and copy/paste the following code at the end:
      /* Adding Font Bebas */
@font-face {font-family: Bebas;src: url(../fonts/Bebas.eot);}
@font-face {font-family: "Bebas";src:local("Bebas"), url(../fonts/Bebas.ttf) format("truetype");}
.font-family-bebas h1, .font-family-bebas h2.title, .font-family-bebas .rt-joomla .user legend, .font-family-bebas .rt-joomla .contact legend, .font-family-bebas .componentheading , .font-family-bebas .edit-article legend {font-family: Bebas,Helvetica,Arial,sans-serif;letter-spacing: normal;font-weight: normal;}

      3. Adding the info to the font-settings dropdown

      a) Open your ../templates/rt_juxta_j15/templateDetails.xml file and locate the following code:
      <param name="family" type="selectbox" default="georgia" label="FONT_FAMILY" description="" isbodyclass="true" setbyurl="true" setinsession="true" setbysession="true" setincookie="true" setbycookie="true">
    <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>
</param>

      b) Change it to:
      <param name="family" type="selectbox" default="georgia" label="FONT_FAMILY" description="" isbodyclass="true" setbyurl="true" setinsession="true" setbysession="true" setincookie="true" setbycookie="true">
    <option value="bebas">Bebas</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>
</param>

      Bebas should now be added to your font-settings drop-down and show on the front-end of your Juxta site when selected.
      This image is hidden for guests.
      Please log in or register to see it.

      hope this helps, kat :)
    • Kat05 / QA Lead & Support / Germany
    #505700

  • Re: Tutorial - how to add custom fonts

    Posted 14 years 6 months ago
    • Hi Kat05,

      thanks a lot for this tutorial. this is really helpfull ... especially for a noob like me ... have to try it ASAP

      :twisted:
    #505857

  • Re: Tutorial - how to add custom fonts

    Posted 14 years 6 months ago
    #509886

  • Re: Tutorial - how to add custom fonts

    Posted 14 years 5 months ago
    • I am not using Google fonts directory and use the free custom font YanoneKaffeesatz-Bold but a little bit confused when defining the font YanoneKaffeesatz-Bold.
      Will you please elaborate the definition using YanoneKaffeesatz-Bold?
      Thank you.
    #510091

  • Re: Tutorial - how to add custom fonts

    Posted 14 years 5 months ago
    • Font name specification is important as I saw.
      I have used font-face generator at www.fontsquirrel.com/fontface/generator and the class .font-family should have the name defined by the generator.
      Anyway this is solved
    #511058
    • ipb1962's Avatar
    • ipb1962
    • Sr. Rocketeer
    • Posts: 114
    • Thanks: 0

    Re: Tutorial - how to add custom fonts

    Posted 14 years 5 months ago
    • Okay

      Font Squirrel is great and I have created all files needed for a font family but how do I implement each style for a different purpose ie. Agenda Bold for h1 / Agenda Black for h2 and Agenda Medium for body copy...

      Any pointers would really be appreciated.


      Ian.
    #514023
    • depika's Avatar
    • depika
    • Rocketeer
    • Posts: 73
    • Thanks: 0

    Re: Tutorial - how to add custom fonts

    Posted 14 years 4 months ago
    • republique wrote:
      Okay

      Font Squirrel is great and I have created all files needed for a font family but how do I implement each style for a different purpose ie. Agenda Bold for h1 / Agenda Black for h2 and Agenda Medium for body copy...

      Any pointers would really be appreciated.


      Ian.

      I have the same issue. Shall we add all the fonts with @font-face and name them separately and then chose which one to use for h1, h2 etc?

      will this work?
    #525009

  • Re: Tutorial - how to add custom fonts

    Posted 14 years 4 months ago
    • I'd love to see a css selector in the gantry backend for maybe up to 5 different fonts for different classes/ids
    #527391

  • Re: Tutorial - how to add custom fonts

    Posted 14 years 4 months ago
    • Kat, If i want to add tres fonts. What can i do?
      I prove with the code that stay in the instruccions.

      I'm working in crystalline. I opened my templates.css and add the follow code:
      /* Letra Consola */
      @font-face {font-family: Consolas;src: url(../fonts/CONSOLA.TTF);}
      @font-face {font-family: "Consolas";src:local("Consolas"), url(../fonts/CONSOLA.TTF) format("truetype");}
      .font-family-consolas h1, .font-family-consolas h2.title, .font-family-consolas
      .rt-joomla .user legend, .font-family-consolas.rt-joomla .contact legend,
      .font-family-consolas .componentheading , .font-family-consolas .edit-article
      legend {font-family: Consolas,Helvetica,Arial,sans-serif;letter-spacing: normal;font-weight: normal;}

      Then, i add the tag to put the font in the site on details:
      <option value="consolas">Consolas</option>

      And the font don't show on the template.

      Are four fonts:
      CONSOLA.TTF
      CONSOLAB.TFF
      CONSOLAI.TFF
      CONSOLAZ.TFF

      Another questions more, what happens with the font size? It's not necesarry specify that?

      Thanks for your answer.
    • "The smart woman is not one that have a big knowledge, but rather the woman with little knowledge do so much."

      How to get a help quicker:
      www.rockettheme.com/forum/index.php?f=15..._v=viewtopic#p773136
    #528017

  • Re: Tutorial - how to add custom fonts

    Posted 14 years 4 months ago
    • Kat, i was editing my web and i resolve my problem, but i don't use the code that you gave in this post. I don't know why. But, if other person have the same problem with me, i'll post how was my solution...

      Best regards,
    • "The smart woman is not one that have a big knowledge, but rather the woman with little knowledge do so much."

      How to get a help quicker:
      www.rockettheme.com/forum/index.php?f=15..._v=viewtopic#p773136
    #528120

Time to create page: 0.084 seconds