0
Welcome Guest! Login
0 items Join Now

Custom font not loading..

Last Post
Search Topic

  • Custom font not loading..

    Posted 11 years 8 months ago
    • Hi,

      Have followed the tutorial here:http://www.gantry-framework.org/documentation/joomla/tutorials/adding-a-custom-stylesheet

      I have the custom font Kefa.ttc and I add it to my css, in a file called gantry-custom.css placed in the according template folder.:
         /* Adding Font KEFA */
     
    @font-face {
    font-family: 'kefa';
    url('../fonts/kefa.ttc') format('truetype'),
 
    }
     
    .body, .font-family-kefa, .title, .font-family-kefa .component-content h2, .component-content h2  {
    font-family: 'KefaNormal',Helvetica,Arial,sans-serif !important;
    font-weight: normal;
    font-style: normal;
    }

      However nothing happens. I have placed the file Kefa.ttc in the fonts folder and I can see Kefa in the Font Settings under the template manager.

      What am I missing?

      Regards,
      Regin
    #941480
    • cdavis411's Avatar
    • cdavis411
    • Preeminent Rocketeer
    • Posts: 17787
    • Thanks: 882

    Re: Custom font not loading..

    Posted 11 years 8 months ago
    #941742

  • Re: Custom font not loading..

    Posted 11 years 8 months ago
    • Hi Cdavis411,

      I have no, and it helped me quite a bit, to follow the guide through, so I could replicate what to do.

      But alas, it did not work. I did the following:

      Uploaded these files to the fonts folder:

      kefa.ttc-webfont.woff
      kefa.ttc-webfont.ttf
      kefa.ttc-webfont.svg
      kefa.ttc-webfont.eot

      Then i added this css to the file gantry_custom.css in the CSS folder of the template:
      /* Adding Font KEFA */

      @font-face {
      font-family: 'kefabold';
      src: url('kefa.ttc-webfont.eot');
      src: url('kefa.ttc-webfont.eot?#iefix') format('embedded-opentype'),
      url('kefa.ttc-webfont.woff') format('woff'),
      url('kefa.ttc-webfont.ttf') format('truetype'),
      url('kefa.ttc-webfont.svg#kefabold') format('svg');
      font-weight: normal;
      font-style: normal;

      }
      .font-family-kefa {
      font-family: 'KefaNormal',Helvetica,Arial,sans-serif;
      font-weight: normal;
      font-style: normal;
      }

      I clear out the cache in Joomla and browser, chose the Kefa font in the templates manager, (I have changed the XML file), but nothing happens..

      The link to the site is here:
      ht.nioba.dk

      What am I missing...

      Thx
      Reign
    #944719
    • Ali Samii's Avatar
    • Ali Samii
    • Elite Rocketeer
    • Posts: 629
    • Thanks: 2

    Re: Custom font not loading..

    Posted 11 years 8 months ago
    • You still need to provide the accurate path to the font files.

      The fonts, I assume, are in ../fonts/ as you had in your previous code.

      In the amended code, you have removed the ../fonts/

      Try this:
      @font-face {
    font-family: 'kefabold';
    src: url('../fonts/kefa.ttc-webfont.eot');
    src: url('../fonts/kefa.ttc-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/kefa.ttc-webfont.woff') format('woff'),
    url('../fonts/kefa.ttc-webfont.ttf') format('truetype'),
    url('../fonts/kefa.ttc-webfont.svg#kefabold') format('svg');
    font-weight: normal;
    font-style: normal;
}
    • Thank you.

      Ali Samii
    #944748

  • Re: Custom font not loading..

    Posted 11 years 8 months ago
    • Hi Ali,

      How did I not see that.. must be getting tired.. I did as you said, and provided the accurate paths, but is still does not work.

      Regards
      Regin
    #944764
    • Ali Samii's Avatar
    • Ali Samii
    • Elite Rocketeer
    • Posts: 629
    • Thanks: 2

    Re: Custom font not loading..

    Posted 11 years 8 months ago
    • Where is your fonts folder located?

      Is it at site_root/templates/your_template/fonts or is it somewhere else?

      Make sure that it is spelled correctly.

      Also, are you using less or css to put together the custom styles? From what I see above, it seems that you are writing css. The file name of the css is important. It must be:

      rt_templatename-custom.css where rt_templatename is your template's name.

      It appears you are using fracture, so your custom css file must be named:

      rt_fracture-custom.css

      I think you have said you have called the file gantry_custom.css. That won't work.
    • Thank you.

      Ali Samii
    #944776

  • Re: Custom font not loading..

    Posted 11 years 8 months ago
    #944788
    • Ali Samii's Avatar
    • Ali Samii
    • Elite Rocketeer
    • Posts: 629
    • Thanks: 2

    Re: Custom font not loading..

    Posted 11 years 8 months ago
    #944798

  • Re: Custom font not loading..

    Posted 11 years 8 months ago
    • Ok - I pasted the same CSS into the rt_frature-custom.css file, and it works now. The font is not very pretty though, but is what my friend wanted for his website :)
    #944811

  • Re: Custom font not loading..

    Posted 11 years 8 months ago
    • Thank you Ali!
    #944812

Time to create page: 0.062 seconds