About This HTML Issue
@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.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.