HTML Guides for font-feature-values
Learn how to identify and fix common HTML validation errors flagged by the W3C Validator — so your pages are standards-compliant and render correctly across every browser. Also check our Accessibility Guides.
@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.
Ready to validate your sites?
Start your free trial today.