CSS font-language-override Property
The font-language-override CSS property allows to specify the language system of the font. See the values and try examples.
The CSS font-language-override property controls which set of language-specific glyphs a font uses. Many fonts ship alternate glyph shapes that are correct for one language but wrong for another — the same Unicode character can be drawn differently in Turkish, Danish, or Romanian text. This property lets you tell the font engine which language's typographic rules to apply, independently of the document's actual language.
This page explains what the property does, when it is useful, the values it accepts, and how it differs from the HTML lang attribute.
What it does
Modern OpenType fonts contain a locl (localized forms) feature: a table that swaps in language-appropriate glyphs based on the language the text is tagged with. Normally the browser picks the language from the HTML lang attribute and passes it to the font, which then selects the matching glyphs.
font-language-override lets you override that automatic choice. Instead of trusting the lang attribute, you hand the font an explicit OpenType language system tag. This is useful in two situations:
- The font has the right glyphs but the wrong tag. Some fonts only expose their localized forms under a specific language tag (for example, a Romanian comma-below
șmay only appear under the Moldavian tag). Settingfont-language-overridemakes that feature fire. - You want another language's typographic rules. When a typeface lacks proper rules for the document's language, you can borrow glyphs from a related language that follows similar conventions.
Note:
font-language-overrideonly changes glyph selection. It does not change the language for spell-checking, hyphenation, or screen readers — those still come from thelangattribute, which you should always set correctly.
| Initial Value | normal |
|---|---|
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | Yes. |
| Animatable | Discrete. |
| Version | CSS3 |
| DOM Syntax | object.style.fontLanguageOverride = "normal"; |
Syntax
font-language-override: normal | <string>;The <string> is a quoted OpenType language system tag (for example "ENG" for English, "DAN" for Danish, "TRK" for Turkish). These tags come from the OpenType specification and are usually three uppercase letters — they are not the same as the two-letter BCP 47 codes used by the lang attribute. If the string does not match a language system the font supports, the declaration has no visible effect.
Example
The example below shows the property in action. The first paragraph keeps the default (normal) behavior, the second forces Danish glyph selection.
<!DOCTYPE html>
<html>
<head>
<title>The title of the document </title>
<style>
.example1 {
font-language-override: normal;
}
.example2 {
font-language-override: "da";
}
</style>
</head>
<body>
<h2>Font-language-override property example</h2>
<p class="example1">Default language setting.</p>
<p class="example2">Here the font-language-override is set to Danish.</p>
</body>
</html>Because most system fonts only ship localized forms for a handful of languages, you will often see no change in the rendered text — the effect is visible only when the active font actually contains alternate glyphs for the tagged language.
Values
| Value | Description |
|---|---|
normal | Instructs the browser to use font glyphs that are appropriate for the language specified by the lang attribute. This is the default value. |
<string> | A quoted OpenType language system tag. Instructs the browser to use the font glyphs associated with that language system instead of the one derived from lang. |
Browser support and notes
- Support is limited: this property has historically only worked in Firefox. Most Chromium and WebKit browsers ignore it, so do not rely on it as the sole mechanism for correct localized typography.
- The dependable, cross-browser way to get language-specific glyphs is to set the
langattribute correctly on your HTML. Reach forfont-language-overrideonly as a targeted fix when a specific font tags its glyphs in a non-standard way. - For finer-grained control over individual OpenType features, see
font-feature-settings, and for higher-level shorthands seefont-variantandfont-family.