HTML Guide for font-feature-values

CSS: Unrecognized at-rule “@font-feature-values”

@font-feature-values is a CSS at-rule that is not widely supported and may cause validation errors in W3C HTML or CSS validators.

Many CSS at-rules must be used carefully, as not all are recognized by validators or supported in all browsers. The @font-feature-values at-rule is intended for advanced font feature control in OpenType, but is not part of the CSS standards supported by most browsers, and thus triggers validator warnings or errors.

To fix the validation issue, remove or comment out any usage of @font-feature-values from your CSS. If you require specialized font features, consider using alternatives such as the font-variant or font-feature-settings CSS properties, which have broader support.

Example of problematic CSS causing validation error:

@font-feature-values MyFamily {
  @swash {
    fancy: 1;
  }
}

Recommended alternative using font-feature-settings:

p {
  font-family: 'MyFamily', serif;
  font-feature-settings: "swsh" 1; /* Enables swash glyphs if supported */
}

Sample HTML usage:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Font Feature Example</title>
    <style>
      p {
        font-family: 'MyFamily', serif;
        font-feature-settings: "swsh" 1;
      }
    </style>
  </head>
  <body>
    <p>This is an example with OpenType features enabled.</p>
  </body>
</html>

For maximum compatibility, stick to widely supported CSS features and consult the MDN Web Docs for font-feature-settings.