0
Welcome Guest! Login
0 items Join Now

Tutorial - how to add custom fonts

  • Re: Tutorial - how to add custom fonts

    Posted 7 years 10 hours ago
    • Thank you, Prim.
    • Greetings, Orpheus
  • Re: Tutorial - how to add custom fonts

    Posted 6 years 11 months ago
    • Thanks Prim

      I have custom fonts now easily working in my Lumiere template :-)
  • Re: Tutorial - how to add custom fonts

    Posted 6 years 11 months ago
    • I'm having problems with this too, The client has chosen a font and supplied it to us, but it only has 8 ttf fonts in it and is not available on fontsquirrel. The font he has chosen is MyriadAppleRegular. can anyone give me heads up on how I can add these to the template and make them selectable in JCE?
  • Re: Tutorial - how to add custom fonts

    Posted 6 years 11 months ago
    • Andy Miller's Avatar
    • Andy Miller
    • Preeminent Rocketeer
    • Posts: 9918
    • Thanks: 92
    • Web Kahuna

    Re: Tutorial - how to add custom fonts

    Posted 6 years 11 months ago
    • Yah we moved to a new github+markdown documentation system, urls will be be different.
    • Selim Rana's Avatar
    • Selim Rana
    • Newbie
    • Posts: 15
    • Thanks: 0
    • Senior Web Designer @ bdthemes ltd

    Re: Tutorial - how to add custom fonts

    Posted 6 years 10 months ago
  • Re: Tutorial - how to add custom fonts

    Posted 6 years 6 months ago
    • I follow the steps with font Mandevilla, but when i view home page I don't see the code:

      <link rel="stylesheet" href="/templates/rt_template/css/custom.css" type="text/css" />

      The template I'm using is the Metropolis and it has an additional folder called css-compiled.

      When I use HMTL code

      <p style="font-family: VolkhovBoldItalic;">Color Bla bla bla bla bla bla </p>
      In my website I don't see the Mandevilla Font.

      WEbsite link: tiendageek.com.co/miobebe

      Test with hmtl Code: tiendageek.com.co/miobebe/index.php/convenios

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

    Re: Tutorial - how to add custom fonts

    Posted 6 years 6 months ago
    • ### HOW TO ADD A NEW FONT TO YOUR GANTRY 4+ TEMPLATE ###

      Note: The reason we are doing all these steps is to make the code more future proof against template- & Gantry updates :)

      In this example I am using the Corvus template and Gantry 4+.

      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_corvus/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_corvus/fonts):


      url('../fonts/Volkhov-BoldItalic-OTF-webfont.woff') format('woff'),

      Name the text file rt_corvus-custom.css and save it (as UTF-8 NO BOM) in /templates/rt_corvus/css


      Done!

      When you view the HTML source of your site you should see something like this:

      <link rel="stylesheet" href="/templates/rt_corvus/css/rt_corvus-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
  • Re: Tutorial - how to add custom fonts

    Posted 6 years 6 months ago
    • Thank you so much, I have a mistake in my CSS i just add @charset "utf-8"; to the first line and it works.

      If i want to use this font for Menu how can i do?
  • Re: Tutorial - how to add custom fonts

    Posted 6 years 6 months ago

Time to create page: 0.117 seconds