Custom fonts doesn't work in a certain html/css project

Question

I can't change the fonts to custom fonts in my project. But The following code does work in a separate test case, but I don't know why this doesn't work in my working project. I don't know what is causing the issue.

• I can change the fonts to some default fonts but not custom fonts.

  @font-face{
    font-family: nazanin;
    src: url(nazanin.ttf);
  }
  
  .customFont{
    font-family: nazanin;
  }

  <h1 class="nazanin">This is a custom Font</h1>

Answer 1

👋

First of all, is the path to your font really nazanin.ttf? Is it in the same folder as this current CSS file?

If it is in a separate folder called "fonts", then try something like this:

@font-face{
  font-family: nazanin;
  src: url(../fonts/nazanin.ttf);
}

Second of all, the .ttf file extension is for Safari, iOS, and Android. Are you using a different browser? If so, that's the problem. I would suggest going with the .woff extension because it is compatible with most modern browsers.