Tell me why the font does not work?

css:

@font-face { font-family: ntw; src: url('../fonts/dominojack.otf') format('otf'); } h1.newfont { text-align: center; font-family: ntw; }

html:

 <div> <h1 class="ntw">Remotion server</h1>

The paths are correct, the files are valid. Css connects to the page correctly (I work with asp.net mvc, I connect via bundles, css is added correctly in the code page). Nothing works, not even text-align: center

It all worked. Changed h1.newfont to .newfont

    2 answers 2

    Perhaps the problem is in @font-face , perhaps the path is not correctly registered, perhaps the format is not suitable.

    As an example of connecting the font:

     @font-face { font-family: ntw; src: url('path-to-font/dominojack.otf') format('otf'); src: url('path-to-font/dominojack.otf') format('eot'); src: url('path-to-font/dominojack.ttf') format('ttf') format("truetype"); src: url('path-to-font/dominojack.otf') format('woff') format("woff"); font-style: normal; font-weight: normal; }
    • The path is correct. Downloaded from a site with free fonts, and the Windows normally defines a file. - Yaktens Teed
    • As I said above - I tried another font with a different extension, it also does not work - Yaktens Teed

    And here is the solution :)

    Paste it in your css

      @font-face { font-family: 'dominojack'; src: url('../fonts/dominojack.otf') format('otf'); } .newfont h1 { text-align: center; font-family: 'dominojack'; }


    And this is in HTML

     <div class="newfont"> <h1>Remotion server</h1> </div>


    • Still not working! I even tried another font with a different extension - Yaktens Teed
    • Where is your font file located? - Edick Bily
    • Project directory / fonts / - Yaktens Teed
    • maybe you have the wrong path from the css file. - Edick Bily
    • Indicated correctly. The css file is added to the page code - Yaktens Teed