Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #12669

    Hello,

    I’m making modifications to the Angular theme I recently purchased, and I’ve hit a roadblock when trying to use @font-face.

    I have 3 main fonts I want to use for different elements throughout the site. Currently, I have the font kits in a folder I added to the Angular theme content (I originally had them on my root and tried globally linking them. This was unsuccessful as well).

    Here’s my markup for one of the fonts (would post all 3, but I’m using the same syntax for all of them):

    @font-face {

    font-family: ‘ZagBoldRegular’;

    src: url(‘../fonts/zag/zag_bold-webfont.eot’);

    src: url(‘../fonts/zag/zag_bold-webfont.eot?#iefix’) format(‘embedded-opentype’),

    url(‘../fonts/zag/zag_bold-webfont.woff’) format(‘woff’),

    url(‘../fonts/zag/zag_bold-webfont.ttf’) format(‘truetype’),

    url(‘../fonts/zag/zag_bold-webfont.svg#ZagBoldRegular’) format(‘svg’);

    font-weight: normal;

    font-style: normal;

    }

    Then I try to apply it to all h1 tags:

    h1 {

    font-family: ZagBoldRegular; /* tried this with and without quotes) */

    font-weight: normal;

    }

    But unfortunately, this has no effect. I read a couple other threads where this was happening, but they were for different themes. I tried a couple solutions and had no luck.

    Do you have any idea how I might be able to fix this? Thanks in advance for your help.

    #76321

    Can you post a link to your website please? Maybe the fonts don’t load properly because the url/path is wrong. Personally I always add the font folder to the css folder (angular/css) and then you just need to use ” src: url(‘fonts/zag/zag_bold-webfont.eot’); ” in css/custom.css.

    #76322

    Hey Dude,

    Sorry for the delay. I had to get my site live over the last couple days (I was using a maintenance mode plugin while working on it).

    I decided to activate a custom font through the theme for the time-being, and turned of my @font-face code, but the font files are located in a folder named “fonts”, one directory outside of the custom.css file. I should add that I had no custom fonts selected when I originally tried to get this to work. I hope this helps.

    The link to my site is:

    http://stevemonfils.com/

    Thanks

    #76323

    I tried to access eg http://stevemonfils.com/wp-content/themes/angular/fonts/zag/zag_bold-webfont.eot directly but it gives me a 404 error. I’d check if the path is correct, if the file exists and the ftp permission rules for the fonts directory.

    #76324

    Hey Dude,

    This turned out to be a simple permissions issue with my hosting. I had it fixed, retested, and the custom fonts work great!

    Thanks for the insight.

    #76325

    Hey,

    Glad it is fixed.

    Regards,

    Ismael

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘@font-face with Angular theme’ is closed to new replies.