0
Welcome Guest! Login
0 items Join Now

Tutorial - how to add custom fonts

    • BhattaS's Avatar
    • BhattaS
    • Rocketeer
    • Posts: 94
    • Thanks: 0

    Re: Tutorial - how to add custom fonts

    Posted 7 years 10 months ago
    • I meant I added the following to template-options.xml

      <field name="family" type="fonts" default="helvetica" label="FONT_FAMILY" isbodyclass="true" setbyurl="true" setinsession="true" setbysession="true" setincookie="true" setbycookie="true">
      <option value="RotisSansSerif">RotisSansSerif</option>
      <option value="cambria">Cambria</option>
      <option value="caslon">Adobe Caslon Pro</option>
      <option value="courier">Courier</option>
      <option value="lucida">Lucida</option>
      <option value="garamond">Garamond</option>
      <option value="georgia">Georgia</option>
      <option value="gillsans">Gill Sans</option>
      <option value="helvetica">Helvetica Neue</option>
      <option value="arial">Arial</option>
      <option value="tahoma">Tahoma</option>
      <option value="EBGaramond">EB Garamond</option>
      <option value="palatino">Palatino</option>
      <option value="trebuchet">Trebuchet</option>
      </field>
      <field name="size" type="selectbox" default="100%" label="FONT_SIZE">
      <option value="83%">F_XSMALL</option>
      <option value="91%">F_SMALL</option>
      <option value="100%">F_DEFAULT</option>
      <option value="116%">F_LARGE</option>
      <option value="125%">F_XLARGE</option>
      </field>
    • Thank you
      Sincerely
      Swagato Bhatta
  • Re: Tutorial - how to add custom fonts

    Posted 7 years 10 months ago
    • Thanks Kat & Prim for this tutorial - worked perfectly.

      I would have had the task completed much quicker if I hadn't relied on Firebug to show the new font once installed, by checking with a manual change to the font familiy on the element I wanted, which didn't work ?

      What did work was just to commit the changes in the CSS file and then reload my browser window.

      Thanks again.
    • nican's Avatar
    • nican
    • Sr. Rocketeer
    • Posts: 205
    • Thanks: 1

    Re: Tutorial - how to add custom fonts

    Posted 7 years 9 months ago
    • Hello,
      I followed this useful tutorial and my custom font is loaded correclty
      for module titles as well as for article titles

      the problem is that I am not be able to load it manually:
      eg. by using "font-family" css class

      why this is not possible?
      I am using joomla 1.5.26 with Panacea template

      What I would like to achieve is to mantain the default font for the site body texts, but to use the custom font for module titles, article titles AND for special titles I may want to create when I need.

      eg with this code:
      <div style="float: left; font-size: 170%;color:#7AB732;margin-top: 10px;font-family:"Dax, sans-serif;">NEWSLETTER:</div>

      my font "dax" is not being loaded

      Regards,
      Nic
    • nican's Avatar
    • nican
    • Sr. Rocketeer
    • Posts: 205
    • Thanks: 1

    Re: Tutorial - how to add custom fonts

    Posted 7 years 9 months ago
    • I followed the below tutorial by prim,
      but unfortunately it doesn't work for me when using the new font family

      prim wrote:
      ### HOW TO ADD A NEW FONT TO YOUR GANTRY TEMPLATE ###

      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:

      font-face.Kit.Choose.a.Subset.png

      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:

      choose.font.formats.png

      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
    • nican's Avatar
    • nican
    • Sr. Rocketeer
    • Posts: 205
    • Thanks: 1

    Re: Tutorial - how to add custom fonts

    Posted 7 years 9 months ago
    • Ok, now it works,
      the error was in the custom css class I had added to template.css file

      like this
      .daxfontbold {font-family: "DaxCondensedExtraBold;,Helvetica,Arial,sans-serif !important;}

      it wasn't working

      like this
      .daxfontbold {font-family: DaxCondensedExtraBold;}

      it works
  • Re: Tutorial - how to add custom fonts

    Posted 7 years 9 months ago
    • Still looking for some pointers!

      I have had success adding my custom fonts, in this case there is a book, medium and bold version of the font that is different than simply calling "bold" in the editor. so i have three weights of the same font, treated as 3 different font family additions. So the problem is this. Has anyone else had the issue with JCE not listing the added fonts in the editor font list.

      I have added the fonts directly to the template.css , and template-details.xml, - no overrides.

      is there a post about this that i have missed?
    • prim's Avatar
    • prim
    • Preeminent Rocketeer
    • Posts: 17290
    • Thanks: 216

    Re: Tutorial - how to add custom fonts

    Posted 7 years 9 months ago
    • prim's Avatar
    • prim
    • Preeminent Rocketeer
    • Posts: 17290
    • Thanks: 216

    Re: Tutorial - how to add custom fonts

    Posted 7 years 9 months ago
    • nican wrote:
      Ok, now it works,
      the error was in the custom css class I had added to template.css file

      like this
      .daxfontbold {font-family: "DaxCondensedExtraBold;,Helvetica,Arial,sans-serif !important;}

      it wasn't working

      It won't work because you have that ; :)
    • 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 7 months ago
    • how to change fonts type in voxel template to tahoma font?
      i want to change the font type for the menu, main body and articles into tahoma font. how can i change it and how to add tahoma font to all my website to apply all the words to appear in tahoma font.
      Thank you
    • prim's Avatar
    • prim
    • Preeminent Rocketeer
    • Posts: 17290
    • Thanks: 216

    Re: Tutorial - how to add custom fonts

    Posted 7 years 7 months ago
    • With Tahoma it's like Arial, a basic font that is included in all modern operating systems so there is no need to use this totorial for such fonts.

      All you need is to find the default font code for your template and then use this:

      font-family: Tahoma,Helvetica,Arial,sans-serif;
    • 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

Time to create page: 0.101 seconds