4

You can detect if a browser supports a specific or multiple CSS features using the CSS.supports function. It can receive two parameters, the first one is the name of the feature and the second one is the value. For example, if you run CSS.supports("gap", "1rem"), it'll return a boolean indicating if the browser supports the feature or not.

But if you run CSS.supports("font-display", "swap") or try to check if the browser supports any other @font-face descriptors, the function will always return false.

So, what is the correct syntax or way to detect support for @font-face descriptors using the CSS.supports() function? Or, is it even possible? If not then is there any alternative way?

Rafid Muhymin Wafi
  • 328
  • 3
  • 12
  • 1
    I found many ways to detect but not sure are these work for you. [1](https://stackoverflow.com/questions/10339268/is-there-a-way-to-detect-whether-a-users-browser-is-supporting-font-face), [2](https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/check), [3](https://stackoverflow.com/questions/845/how-to-detect-which-one-of-the-defined-font-was-used-in-a-web-page). Some of them are not supported cross browsers, please check that again. – vee Jan 10 '22 at 13:34
  • "CSS font-display is a `@font-face` descriptor and not a property, so its support in the browser cannot be tested with feature queries (CSS `@supports` rule and CSS.supports API).": https://stackoverflow.com/questions/66117975/how-to-test-font-display-swap-on-your-local-machine – Terry Jan 10 '22 at 13:48
  • @Terry Yeah, you are definitely right. – Rafid Muhymin Wafi Jan 10 '22 at 14:31
  • Thank you @vee. The links you mentioned don't have a direct solution to the problem but all of them have some related information. This one is good https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/check. I didn't know about this API. – Rafid Muhymin Wafi Jan 10 '22 at 14:34

0 Answers0