@font-face src:local() does not work on some fonts

user_5462167 0
Viewed 162

@font-face src:local() does not work on some fonts like Fira Code, but it works fine on other fonts like Comic Sans MS. Am i missing something?

Fira Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      @font-face {
        font-family: 'Custom';
        src: local('Fira Code');
      }

      .font {
        font-family: 'Fira Code';
      }

      .font-face {
        font-family: 'Custom';
      }
    </style>
  </head>
  <body>
    <p>Fira Code: <span class="font">hijklmn</span></p>
    <p>Fira Code(@font-face): <span class="font-face">hijklmn</span></p>
  </body>
</html>

Chrome 91.0.4472.164:

Chrome 91.0.4472.164 Fira Code

Firefox 90.0:

Firefox 90.0 Fira Code

Comic Sans MS:

<!DOCTYPE html>
<html>
  <head>
    <style>
      @font-face {
        font-family: 'Custom';
        src: local('Comic Sans MS');
      }

      .font {
        font-family: 'Comic Sans MS';
      }

      .font-face {
        font-family: 'Custom';
      }
    </style>
  </head>
  <body>
    <p>Comic Sans MS: <span class="font">hijklmn</span></p>
    <p>Comic Sans MS(@font-face): <span class="font-face">hijklmn</span></p>
  </body>
</html>

Chrome 91.0.4472.164:

Chrome 91.0.4472.164 Comic Sans MS

Firefox 90.0:

Firefox 90.0 Comic Sans MS

More information:

  • OS: Windows 10
  • Fira Code is installed through .ttf files
  • Fira Code can be used in any editor.
font-face fonts browser css html
2 Answers

You may need to Unblock the font before installing in Windows 10.
If so, then this needs to be done on each .ttf file before installing.
Unblock a font before installing 

@font-face {
  font-family: 'Fira';
  src: local('Fira Code'), local('FiraCode-Regular');
}

.font {
  font-family: 'Fira Code';
}

.font-face {
  font-family: 'Custom';
}
<p><span class="font">Fira Code</span></p>
<span class="font-face">Fira Code(@font-face)</span>

user_150513100

you can use url(fontName.ttf) instead of local('Fira Code') note there are no quotations in the url the code should look like this.

<style>
@font-face {
  font-family: Fira;
  src: url(FiraCode-Regular.ttf);
}
</style>

the .ttf file should be in the same directory as the html file. you can download many fonts in .ttf format using google fonts

user_143137770
Related