Font Weight not applying to Typekit Font

3 Views

I’m having trouble with a font-weight declaration for a typekit font. I have the font installed correctly, and it uses the correct font throughout the site. However, for the bold version of the font, I’m wanting to use the 900 weight of proxima nova. In the kit editor on typekit, I have only included the 900 version and the 300 version. For body copy, the 300 seems to be showing correctly…the 900 version doesn’t display on any computer that doesn’t have the 900 weight installed directly.

I can see it displaying, because I have the font installed on my machine, but no one else can. They just see a bold font, which I’m assuming is defaulting to a 700 weight.

Read More

It should be visible on all headline text (h1, h2, etc.) and as the default bold strong tag. Any ideas on what could be going on?

The site is here: southernkentuckyeye.com/wp/ (It is in development, so don’t judge me.)

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. I figured this out a while back…It turned out to be a really silly error, but for grins, I thought I’d post it here. (Especially if anyone else is having trouble.)

    The way I was declaring the font in the CSS…

    { font-family:”Proxima Nova”, sans-serif; }

    Would show the font on my computer, because I had the font installed on my computer. I knew this, and figured this was the case anyway. What I couldn’t figure out was why Typekit wouldn’t display the font anyway. Turns out, it’s because I wasn’t declaring the font correctly in the CSS. Here’s the correct way…

    { font-family:”proxima-nova”, sans-serif; }

    Again, silly I know, but it’s working now. Make sure you pay close attention to how you declare typekit fonts in CSS.

  2. You haven’t included how you’ve linked the fonts, but if you want to be able to use ‘bold’ or ‘oblique’ the best way is to include them like this: 

    @font-face {
    font-family: "Your font";
    src: url("fonts/your-font.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/your-font.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/your-font.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/your-font.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

    Otherwise, instead of using font-weight: bold, you can use font-weight: 900