CODEWITHSUNDEEP
cssfont-face
stephane
stephane

Reputation: 69

CSS, use @supports to detect @font-face support

Is it possible to use @supports to check if the client's browser supports '@font-face?

My goal is to use several @font-face by default, and if it's not supported, then fallback to another font-family definitions instead.

I've tried the following (see code below); it works, but I wonder if it's legal and/or conform to standards, and if it really does what I'm expecting.

/* Yes, I don't use an actual font-face, but it's irrelevant for the test */
.ff {
  font-family: sans-serif;
}

@supports not (@font-face) {
  .ff {
    font-family: serif;
  }
}

https://jsfiddle.net/idealtitude/5gxf2ojs/7/

Any idea, suggestion? Thanks!

Upvotes: 1

Views: 216

Answers (2)

Albert Wiersch
Albert Wiersch

Reputation: 556

@supports (@font-face) { ... }

and

@supports not (@font-face) { ... }

Does not work to test if the browser supports @font-face. Both of those are invalid CSS. Currently, you can't use @supports to test support for at-rules. See MDN @supports documentation for proper @supports syntax and for what it can test.

Upvotes: 1

A Haworth
A Haworth

Reputation: 36567

The question asks whether the code is legal and whether it does what you are expecting.

Well, it doesn't do what you are expecting.

If you keep the not in then on my browser (which does support font-face) the font shows as serif.

If I remove the not then it shows as sans serif. i.e it appears to be reporting that the browser does not support font-face.

.ff {
  font-family: sans-serif;
}

@supports (@font-face) {
  .ff {
    font-family: serif;
  }
}
<div class="ff">What are you seeing here??</div>

What can you do to test if @font-face is supported? I suppose a simplistic way would be to load some text with a font-face rule which is very different from the font-face you expect to be used as a standard and then see if the size comes out any different.

Upvotes: 1

Related Questions