0
Welcome Guest! Login
0 items Join Now

Tutorial - how to add custom fonts

    • wpress's Avatar
    • wpress
    • Jr. Rocketeer
    • Posts: 30
    • Thanks: 0
    • Social Media Coach and marketing campaign developer; writer for publishing company, web content, books, articles and graduate student in Internet Marketing at Full Sail University.

    Re: Tutorial - how to add custom fonts

    Posted 7 years 11 months ago
    • 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. Copy customcss.php to /templates/rt_template/features/

      customcss.php contains 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");

      }

      }

      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

      Hello Prim,

      I spent today going through every step in your tutorial above, as well as reading everything I can find about fonts. I'm using Diametric and all I want to do is simple: Change the h1 - h6 tags to the Google Font called Rochester. Yes I know there are other posts on this. But none of them have a complete solution, or leave out just one important step that is taken for granted. I read them all - even others on joomla.org. Your tutorial is what I think I need - because I want this to stay for future upgrades. Is this correct?

      In your tutorial above, everything was good up until the step said: 8. Copy customcss.php to /templates/rt_template/features/. Where? Where is customcss.php? Do I create it? If so, in the same format utf8 with NO BOM? Again - you guys are experts and sometimes you may assume we know these tiny things. I'm learning - but have a hard time putting it all together with all these files and where things go, etc... I know I'm not alone.

      Ok, so I did every step above. In step 8, I created a text file and saved as php (even though I have no clue about php) - and copied all of the content in it that you said to do. Used Macintosh Text Editor - 1st changed to Plain Text; set preferences to UTF-8 in both places someone else's post on text editors. Saved it in features folder.

      Nothing.
      I tried using methods that others mentioned - like just changing the font in the template.css file. Did that. No change.

      I also did this followed Henning's post responding to yours (right after your tutorial) to be able to use the font <p class="customstyle">some cool text</p>.
      and again, he left out that ONE tiny detail: which css file are you talking about? template.css? custom.css? what? where? These are great tips, but when you get the the bottom line and have to guess and do trial and error - I put it in custom.css - (Henning's) code suggestion.
      Nothing.
      No font changes anywhere - not in the tags; not using <p class="customstyle">some cool text</p> in an article. Something's not right and I know not what to check from here.

      the Google font I need is: font-family: 'Rochester', cursive;

      Here's GOogle's website code in case it helps: <link href=' fonts.googleapis.com/css?family=Rochester ' rel='stylesheet' type='text/css'> -- although I know I don't want to use this method for getting the font in place.
      Any help?

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

    Re: Tutorial - how to add custom fonts

    Posted 7 years 11 months ago
    • In your tutorial above, everything was good up until the step said: 8. Copy customcss.php to /templates/rt_template/features/. Where? Where is customcss.php? Do I create it? If so, in the same format utf8 with NO BOM? Again - you guys are experts and sometimes you may assume we know these tiny things. I'm learning - but have a hard time putting it all together with all these files and where things go, etc... I know I'm not alone.

      I updated that part of the tutorial. I hope it's more clear now :)
    • 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
    • wpress's Avatar
    • wpress
    • Jr. Rocketeer
    • Posts: 30
    • Thanks: 0
    • Social Media Coach and marketing campaign developer; writer for publishing company, web content, books, articles and graduate student in Internet Marketing at Full Sail University.

    Re: Tutorial - how to add custom fonts

    Posted 7 years 11 months ago
    • Hello Prim,

      Thanks! I finally achieved success via your tutorial...grateful. My first test at editing css in several different files and it worked!

      Just one final issue and I'm good to go ... The font I need to use is a Google font called, Rochester. When I generated the code using www.fontsquirell.com , the font wasn't listed so I generated the code by putting the font name in their @fontface generator, rather than your instructions to use @fontfacekit (since it wasn't listed). The issue is that it's picking up a different 'Rochester' font version, not the Google font. It looks okay, but isn't what client wants.

      Is there a way to generate the code through another tool, or through the small information Google gives us on the fonts? (searching the web isn't showing an answer as yet).

      Google's instructions:

      Standard: @import url( fonts.googleapis.com/css?family=Rochester );

      4. Integrate the fonts into your CSS:

      The Google Web Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles. For example:

      font-family: 'Rochester', cursive;


      I need code for .svg and all browser formats. Anyone have an idea what to do?

      Thanks a million.

      Kwilder 8)
  • Re: Tutorial - how to add custom fonts

    Posted 7 years 11 months ago
    • Hello Prim,

      I have a further question - why doesn't this result in JCE picking up the fonts. for use in the drop down. i know the fonts are installed because i can call them directly, and they work but they don't seem to be picking up, I am using Joomla 2.5 and Zepher

      If you pm me I can grant you access to the live site
      thanks
      Jim
    • prim's Avatar
    • prim
    • Preeminent Rocketeer
    • Posts: 17290
    • Thanks: 216

    Re: Tutorial - how to add custom fonts

    Posted 7 years 11 months ago
    • I can't really help today but JCE should be like JoomlaFCK and have a feature where you can select a default CSS file to 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
  • Re: Tutorial - how to add custom fonts

    Posted 7 years 10 months ago
    • Thanks Prim,

      My problem is still persisting, I have adjusted for default css settings, and even tried adding the fonts to the template.css. (i have adjusted the xml, etc.)On the backend i can then see the family, but, still the fonts don't show up in the editor for an article. Has anyone else had this problem? it seems to be relegated only to editors not actual hardcoded html/css in articles that were done before 2.5 migration.

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

    Re: Tutorial - how to add custom fonts

    Posted 7 years 10 months ago
    • wpress wrote:
      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. Copy customcss.php to /templates/rt_template/features/

      customcss.php contains 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");

      }

      }

      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

      .

      I followed the instruction followed by adding

      <option value="RotisSansSerif">RotisSansSerif</option>

      in my templatedetails.xml. I am trying to use Rotis Sans Serif font. I can see the font settings in the parameters. However when I chose it, the font doesnt show up in the front.



      Any help?
    • Last Edit: 7 years 10 months ago by BhattaS.
    • Thank you
      Sincerely
      Swagato Bhatta
    • BhattaS's Avatar
    • BhattaS
    • Rocketeer
    • Posts: 94
    • Thanks: 0

    Re: Tutorial - how to add custom fonts

    Posted 7 years 10 months ago
    • When I change the css file (hardcode it), the font family does change to RotisSansSerif. However, if I chose it from the template settings parameters, nothing happens. Help please
    • Thank you
      Sincerely
      Swagato Bhatta
    • BhattaS's Avatar
    • BhattaS
    • Rocketeer
    • Posts: 94
    • Thanks: 0

    Re: Tutorial - how to add custom fonts

    Posted 7 years 10 months ago
    • If I chose other fonts from the settings, it does change. So what is it "EXACTLY" do I need to do to get the setting fixed for this Rotis Sans Serif font (aka allow me to chose the font from the setting rather than type it in the css)?
    • Thank you
      Sincerely
      Swagato Bhatta
    • BhattaS's Avatar
    • BhattaS
    • Rocketeer
    • Posts: 94
    • Thanks: 0

    Re: Tutorial - how to add custom fonts

    Posted 7 years 10 months ago
    • :cry:
    • Thank you
      Sincerely
      Swagato Bhatta

Time to create page: 0.131 seconds