Search code examples
cssfont-face

Add a bought font file to my WebStorm project using SASS. Angular Project

I want to know what am i missing here? I have the following definition in my SASS file:

@font-face
  font-family: "NHaasGroteskDSPro"
  src: url("fonts/NHaasGroteskDSPro-95Blk.otf") format("otf")

h1.ir-page-header
  font-family: "NHaasGroteskDSPro"
  font-weight: 800
  font-size: 30px

And the relevant HTML element is:

<h1 class="ir-page-header">some text</h1>

The developer tool shows that the element has the required class and its not override by other css styles. Sadly the font showed is not the font wanted.

here is a link to the font page on fonts.com: http://www.fonts.com/font/linotype/neue-haas-grotesk/display-family-pack

I thought it will be easy to find the answer online but after spending 2 hours on a 10 min task i decided to post my question for future generations :-)

Solution

  • Well i changed the @font-face to be:

    @font-face
  font-family: "Neue Haas Grotesk"
  font-weight: 800
  font-style: normal
  src: url("fonts/NHaasGroteskDSPro-95Blk.otf") format("opentype")

    And it solved the problem.