Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • February 7, 2015 at 2:19 am #392373
    Nomodic

    Hey there, great theme!

    I’m a bit of a website newbie but I’ve been able to Google most answers up until this one. I’ve bought and downloaded a custom font from MyFonts.com (AvenirNextLTPro-Medium) that I want to use for all headers on the website. The file name of the actual font files is “2D45D7_0_0”. I’ve put the font files inside the theme folder and followed instructions mentioned on other threads. The following code is in the custom.css file:

    @font-face {
    font-family: ‘AvenirNextLTPro-Medium’;
    src: url(‘css/MyFontsWebfontsKit/webfonts/2D45D7_0_0.eot’);
    src: url(‘css/MyFontsWebfontsKit/webfonts/2D45D7_0_0.eot?#iefix’) format(’embedded-opentype’),
    src: url(‘css/MyFontsWebfontsKit/webfonts/2D45D7_0_0.woff2’) format(‘woff2’),
    src: url(‘css/MyFontsWebfontsKit/webfonts/2D45D7_0_0.woff’) format(‘woff’),
    src: url(‘css/MyFontsWebfontsKit/webfonts/2D45D7_0_0.ttf’) format(‘truetype’),
    src: url(‘css/MyFontsWebfontsKit/webfonts/2D45D7_0_0.svg#AvenirNextLTPro-Medium’) format(‘svg’);
    }

    And then I entered this code into the Quick CSS field:

    h1, h2, h3, h4, h5 {
    font-family: ‘AvenirNextLTPro-Medium’;
    font-weight: normal;
    font-style: normal;
    }

    I’ve tried variations of this code (adding the full url, etc) but the header fonts on my website haven’t changed. Any ideas?

    Any input would be much appreciated! Thanks a lot.

    February 7, 2015 at 7:27 pm #392554
    Elliott

    Hi Nomodic!

    Try adding the !important override like so.

    h1, h2, h3, h4, h5 {
font-family: 'AvenirNextLTPro-Medium' !important;
font-weight: normal;
font-style: normal;
}

    Also, I don’t see the font loading on your site so make sure that you upload the fonts to a directory on your server and try using absolute path to them like so.

    http://www.yoursite.com/fonts/2D45D7_0_0.eot

    Cheers!
    Elliott

    • This reply was modified 9 years, 9 months ago by Elliott.
    February 9, 2015 at 10:09 pm #393346
    Nomodic

    Thanks a lot Elliott, that seems to do the trick! Just a couple small things I noticed:

    1. Now my footer widget headers suddenly became very bold and I’d like them to be Avenir Medium as well. I browsed the forums and tried this code in Quick CSS:

    #footer .widgettitle {
    font-family: “AvenirNextLTPro-Medium”, Helvetica, Arial, sans-serif;
    }

    Also tried adding “!important” behind “AvenirNextLTPro-Medium” but nothing changed. Any tips?

    2. Every time I try to add a “fallback” font option (for mobile, etc) in Quick CSS, the Avenir reverts back to a default font. So for example I tried adding Arial and sans-serif:

    h1, h2, h3, h4, h5 {
    font-family: ‘AvenirNextLTPro-Medium’ !important, “Arial”, sans-serif;
    font-weight: normal;
    font-style: normal;
    }

    And now Avenir changes back to a default font. Any ideas there?

    Thanks again!

    • This reply was modified 9 years, 9 months ago by Nomodic.
    February 10, 2015 at 10:55 am #393596
    Rikard

    Hey!

    The !important statement needs to be last for every statement, try this instead: 

    h1, h2, h3, h4, h5 {
font-family: ‘AvenirNextLTPro-Medium’, “Arial”, sans-serif !important;
font-weight: normal;
font-style: normal;
}

    Regards,
    Rikard

    February 12, 2015 at 11:22 pm #395402
    Nomodic

    Thanks a lot guys, that seems to work.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Custom fonts for headers’ is closed to new replies.