Search code examples
htmlcssfontsfont-facesame-origin-policy

Why is @font-face not able load all font weights in ttf format?

I have a demo of my landing page working on github https://anupamkhosla.github.io/omcarreer/ In the css I have the following code:

@font-face {
  font-family: "Open Sans";
  src: url("Open_Sans/OpenSans-Light.ttf") format("truetype");
  font-weight: lighter;  
}

@font-face {
  font-family: "Open Sans";
  src: url("Open_Sans/OpenSans-Regular.ttf") format("truetype");
  font-weight: normal;  
}

The font Open Sans is downloaded from Google https://fonts.google.com/specimen/Open+Sans The files are downloaded as ttf truetype.

The h1 tag saying "We are the most trusted brand in recruitment fraternity." is supposed to take lighter font weight, but what is happening is that all browsers seem to disregard the first font-face declaration and hence do not load the lighter version of the font. If I interchange the font-face declarations' positions then again the one mentioned at last seems to be respected. You can see the font face declarations in the css file here https://anupamkhosla.github.io/omcarreer/css/main.css If you open the Networks tab in inspect element you will see only the later mentioned font is being loaded.

Why is font-face being overridden like this? I used to make other websites with similar font-face declarations and never had this problem.

Solution

  • The value "lighter" can be used in a font-weight property applied to content elements, meaning lighter than the inherited value. (See CSS Fonts Module Level 3, §3.2.

    But in an @font-face rule, "lighter" is not a valid value. (See CSS Fonts Module Level 3, §4.4. And it wouldn't make sense: lighter than what?

    In the @font-face rule, you should use font-weight: 300.