How to import font-face with font-weight 500

Question

I'm working on a site that uses some adobe fonts and I'm having trouble getting a font-weight at 500.

I've got adobe font that I'm importing like this:

        <link rel="stylesheet" href="https://use.typekit.net/<some-random-code>.css">

The href points to a css file that looks like this:

...

@font-face {
  font-family:"itc-avant-garde-gothic-pro";
  src:url("<some-url>") format("woff2"),url("<some-url>") format("woff"),url("<some-url>") 
  format("opentype");
  font-display:auto;
  font-style:normal;
  font-weight:700;
}

@font-face {
  font-family:"itc-avant-garde-gothic-pro";
  src:url("<some-url>") format("woff2"),url("<some-url>") format("woff"),url("<some-url>");
  font-display:auto;
  font-style:normal;
  font-weight:300;
}


.tk-itc-avant-garde-gothic-pro { font-family: "itc-avant-garde-gothic-pro",sans-serif; }

It shows font-weight 300 and 700 but not 500.

My understanding is that the browser isn't going to know how how to execute CSS code that specifies that a div has font-weight: 500.

And in fact, when I look at selectors with font-weight: 500 and I bump them down to 400 via the chrome developer console, I see no change.

So how do I get the site to show the font-weight I want?

Answer 1

I noticed when you originally add that font to a kit, the default setting is to only include Book and Bold, but if you notice there's a view one more option that is the Medium (500 weight) typeface. You need to edit your kit/web project to include it.

You shouldn't have to worry about the loaded CSS file from Adobe as long as it is loading and includes all 3 weights. If you define classes for book, medium, and bold like so

<style>
.book {
    font-family: itc-avant-garde-gothic-pro, sans-serif;
    font-weight: 300;
    font-style: normal;
}
.medium {
    font-family: itc-avant-garde-gothic-pro, sans-serif;
    font-weight: 500;
    font-style: normal;
}
.bold {
    font-family: itc-avant-garde-gothic-pro, sans-serif;
    font-weight: 700;
    font-style: normal;
}
</style>

Then apply those classes to your markup, you should see 3 distinct weights.

<p class="book">
Nunc nec neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Morbi nec metus. Nullam vel sem. Etiam vitae tortor. 
</p>
<p class="medium">
Sed aliquam ultrices mauris. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Vivamus consectetuer hendrerit lacus. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Sed fringilla mauris sit amet nibh. 
</p>
<p class="bold">
Etiam vitae tortor. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Donec posuere vulputate arcu. Nullam accumsan lorem in dui. Aenean imperdiet. 
</p>