What Can Be The Reason For @font-face Failing To Work?

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

Solution 1:

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><iclass='bold-font'>Hello! I'll be Lucida/TNR</i></b> and this will be something else.

Here it is as a fiddle.

Solution 2:

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