CSS Portal

CSS font-language-override Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The font-language-override property lets authors influence which language tag the browser uses when selecting language-specific glyphs and shaping features from a font. Many modern fonts contain alternate glyphs and OpenType features that are activated only for particular languages or script variants; by providing an explicit language override at the CSS level, the rendering engine will consult that language choice when applying language-dependent font lookups and shaping logic rather than relying solely on the element or document language metadata.

This override affects decisions the font system makes during text layout: glyph substitution, positioning, and the activation of language-sensitive OpenType features (for example, localized alternates). That can change which glyph variant is chosen from a font for letters that differ by language, and can influence fallback behavior when a requested language-specific glyph is not present in the primary font. The result is more predictable typography in multilingual contexts and greater control over how a font is interpreted for scripts with significant language-specific shaping rules.

Use cases include web pages that mix languages in ways that the HTML language attributes or the user agent cannot represent precisely, or components that need consistent typographic behaviour regardless of surrounding language settings. It is often used alongside font selection and feature control, so authors should consider how the override interacts with other font controls such as font-family, font-feature-settings, or font-variant-ligatures. Because the override only affects language-tag-based font lookups and shaping decisions, it does not replace semantic markup for language and should be used when typographic correctness or consistency is required in spite of the document language information.

When applying language overrides, keep in mind that the effective result depends on the fonts available and on the rendering engine’s implementation of language-sensitive features. If a font does not include distinct language-specific glyphs or the renderer does not perform language-specific substitutions for a given script, the override will have little or no visible effect. Therefore testing with the target fonts and text samples is recommended to confirm that the override produces the intended typographic outcome.

Definition

Initial value
normal
Applies to
All elements
Inherited
Yes
Computed value
As specified
Animatable
No
JavaScript syntax
object.style.fontLanguageOverride

Syntax

font-language-override: normal | <string>

Values

  • normalSpecifies that when rendering with OpenType fonts, the content language of the element is used to infer the OpenType language system.
  • <string>Single three-letter case-sensitive OpenType language system tag, specifies the OpenType language system to be used instead of the language system implied by the language of the element.

Example

<div class="container">
<p class="title">font-language-override demo</p>

<p>
<span class="label">Default shaping:</span>
<span class="sample default" lang="ar">مرحبا بالعالم</span>
</p>

<p>
<span class="label">With font-language-override: "URD":</span>
<span class="sample override" lang="ar">مرحبا بالعالم</span>
</p>
</div>
.container {
    font-family: "Noto Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    max-width: 720px;
    margin: 24px;
    font-size: 20px;
}

.title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.label {
    display: inline-block;
    width: 200px;
    color: #333;
    font-weight: 600;
}

.sample {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 6px;
    background: #f6f7fb;
    border: 1px solid #e2e6ef;
}

/* No override - uses the font's default language shaping */
.sample.default {
    font-language-override: normal;
}

/* Tell the font to use the Urdu language system when shaping glyphs.
   The value is a string (often a 2–4 letter OpenType language-tag). */
.sample.override {
    font-language-override: "URD";
    background: #eef9ff;
    border-color: #cde9ff;
}

Browser Support

The following information will show you the current browser support for the CSS font-language-override property. Hover over a browser icon to see the version that first introduced support for this CSS property.

This property is supported in some modern browsers, but not all.
Desktop
Chrome
Edge
Firefox
Opera
Safari
Tablets & Mobile
Chrome Android
Firefox Android
Opera Android
Safari iOS
Samsung Internet
Android WebView
-

Last updated by CSSPortal on: 1st January 2026

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!