What can be the reason for @font-face failing to work?

Question

What can be the reason for @font-face failing to work?

115 Views Asked by Anelook At 03 April 2025 at 18:49

I have a simple example, where for some reason definition of @font-face will work only for Chrome and fails to work in FireFox, Safari and IE:

https://jsfiddle.net/d8e6xz7e/1/

HTML:

<body>
  <div class="original-font">
    This is the original font
  </div>
  <div class="bold-font">
    This should be bold! But it is not in IE, Safari and FireFox
  </div>
</body>

CSS:

@font-face {
  font-family: 'Lucida Bold Italic';
  font-style: italic;
  font-weight: bold;
  src: local('Lucida Sans Unicode'), local('Times New Roman');
}

.original-font {
  font-family: 'Lucida Sans Unicode';
}

.bold-font {
  font-family: 'Lucida Bold Italic';
}

According to the specification (https://developer.mozilla.org/en/docs/Web/CSS/@font-face) it should be supported for the modern browsers. That is why, I suspect that there is something missing in the css definition.

Would be grateful for any advice!

Original Q&A

There are 2 best solutions below

ArietM On 14 December 2016 at 15:09

@font-face {
   font-family: myFirstFont;
   src: url(font.woff);
}

**Luke Briggs** · Accepted Answer

You're most likely confusing a font face with a font family:

"Lucida Sans Unicode" is a font family
"Lucida Bold Italic" is a font face

In short, a font family is a group of font faces.

@font-face declares a font face joining some custom family. src is the path to a font face file, and that is likely where the problem is:

src: local('Lucida Sans Unicode'), local('Times New Roman');

That's two font families being used as the src of a font face.

Presumably Chrome handles this easily made mistake and uses the 'normal' font face from the family whenever it spots that this has happened.

So, what you probably meant was this:

@font-face {
  font-family: 'MyBoldFont';
  font-style: italic;
  font-weight: bold;
  src: local('Lucida Bold Italic'), local('Times New Roman Bold Italic');
}

.bold-font {
    font-family: 'MyBoldFont';
}

Whenever the text is bold, italic and uses .bold-font, you'll see your custom font face show up, like this simple example:

<b><i class='bold-font'>Hello! I'll be Lucida/TNR</i></b> and this will be something else.

Here it is as a fiddle.

What can be the reason for @font-face failing to work?

There are 2 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in FONT-FACE

Trending Questions

Popular # Hahtags

Popular Questions