CODEWITHSUNDEEP
htmlcssfonts
user11426494
user11426494

Reputation:

Font-weight isn't working on downloaded font

I downloaded a font called Gilroy. I want to include this into my project, and will require various font-weights.

I have included the font, and it loads. But when I try to change the font-weight on the h1 which is the .h class, it doesn't work.

Any ideas here?

@font-face {
    font-family: 'Gilroy';
    font-style: normal;
    src: local('Gilroy'), url('../../vendor/fonts/gilroy-extrabold.otf') format('truetype');
  }

  .h {
    font-family: 'Gilroy', serif;
    font-size: 48px;
    font-weight: 300;

  }

Upvotes: 1

Views: 2926

Answers (1)

Mike 'Pomax' Kamermans
Mike 'Pomax' Kamermans

Reputation: 53725

CSS @font-face is a declarative system where you teach the browser which font asset ("which file") to use for which specific combination of CSS font properties. So if all you've specified is "for the combination family=Gilroy and style=normal use gilroy-extrabold.otf" then that's all you've taught the browser to do. It can't magically switch to something lighter because the only data source it can do text shaping with is this extra bold font file you've given it.

If you need additional weights, then you'll need to teach the browser that they exist, and which font properties they should be used with. For example:

@font-face {
  font-family: Gilroy;
  weight: 400;
  src: url(/fonts/gilroy-regular.woff) format("woff");
}

@font-face {
  font-family: Gilroy;
  weight: 300;
  src: url(/fonts/gilroy-light.woff) format("woff");
}

@font-face {
  font-family: Gilroy;
  weight: 700;
  src: url(/fonts/gilroy-bold.woff) format("woff");
}

And now you have three weights loaded for the font-family: Gilroy rule in your page CSS, with support for weights 300, 400/normal and 700/bold.

Also note that the font asset itself has nothing to do with the CSS properties, so the following is entirely legal:

@font-face {
  font-family: Gilroy;
  weight: 400;
  src: url(/fonts/gilroy-regular.woff) format("woff");
}

@font-face {
  font-family: Gilroy;
  weight: 700;
  src: url(/fonts/gilroy-light.woff) format("woff");
}

@font-face {
  font-family: Gilroy;
  weight: 300;
  src: url(/fonts/gilroy-bold.woff) format("woff");
}

Congratulations, your weight:300 now renders a bold font, and your weight:600 renders a light font. (Bearing that in bind: don't bind an "extra bold" to CSS weight 700, which is the value associated with "standard bold". Bind it to 800, or 900)

Additionally, don't use ttf fonts on the modern web. Get a .woff and/or .woff2 version, and don't use the full universal OpenType versions.

Upvotes: 3

Related Questions