0
Welcome Guest! Login
0 items Join Now

Tutorial - how to add custom fonts

    • prim's Avatar
    • prim
    • Preeminent Rocketeer
    • Posts: 17290
    • Thanks: 216

    Re: Tutorial - how to add custom fonts

    Posted 8 years 15 hours ago
    • ### 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's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29361
    • Thanks: 954
    • Volunteer

    Re: Tutorial - how to add custom fonts

    Posted 8 years 14 hours ago
    • 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! :)
  • Re: Tutorial - how to add custom fonts

    Posted 8 years 10 hours ago
    • 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>
  • Re: Tutorial - how to add custom fonts

    Posted 8 years 10 hours ago
    • How do you insert code in a post?
    • prim's Avatar
    • prim
    • Preeminent Rocketeer
    • Posts: 17290
    • Thanks: 216

    Re: Tutorial - how to add custom fonts

    Posted 8 years 10 hours ago
    • 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's Avatar
    • prim
    • Preeminent Rocketeer
    • Posts: 17290
    • Thanks: 216

    Re: Tutorial - how to add custom fonts

    Posted 8 years 10 hours ago
    • 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
  • Re: Tutorial - how to add custom fonts

    Posted 8 years 10 hours ago
    • 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's Avatar
    • prim
    • Preeminent Rocketeer
    • Posts: 17290
    • Thanks: 216

    Re: Tutorial - how to add custom fonts

    Posted 8 years 9 hours ago
    • 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
  • Re: Tutorial - how to add custom fonts

    Posted 7 years 11 months ago
    • I disabled that now, to install them manually.
  • Re: Tutorial - how to add custom fonts

    Posted 7 years 11 months ago
    • That's what i was exactly after, Thanks so much!!

Time to create page: 0.116 seconds