The font-variant-east-asian CSS property controls the usage of alternate glyphs for East Asian scripts, like Japanese and Chinese.

font-variant-east-asian: normal;
font-variant-east-asian: ruby;
font-variant-east-asian: jis78;              /* <east-asian-variant-values> */
font-variant-east-asian: jis83;              /* <east-asian-variant-values> */
font-variant-east-asian: jis90;              /* <east-asian-variant-values> */
font-variant-east-asian: jis04;              /* <east-asian-variant-values> */
font-variant-east-asian: simplified;         /* <east-asian-variant-values> */
font-variant-east-asian: traditional;        /* <east-asian-variant-values> */
font-variant-east-asian: full-width;         /* <east-asian-width-values> */
font-variant-east-asian: proportional-width; /* <east-asian-width-values> */
font-variant-east-asian: ruby full-width jis83;

/* Global values */
font-variant-east-asian: inherit;
font-variant-east-asian: initial;
font-variant-east-asian: unset;

Initial valuenormal
Applies toall elements. It also applies to ::first-letter and ::first-line.
Computed valueas specified
Animation typediscrete
Canonical orderorder of appearance in the formal grammar of the values



This keyword leads to the deactivation of the use of such alternate glyphs.
This keyword forces the use of special glyphs for ruby characters. As these are usually smaller, font creators often designs specific forms, usually slightly bolder to improve the contrast. This keyword corresponds to the OpenType values ruby.
These values specify a set of logographic glyph variants which should be used for display. Possible values are:
Keyword Standard defining the glyphs OpenType equivalent
jis78 JIS X 0208:1978 jp78
jis83 JIS X 0208:1983 jp83
jis90 JIS X 0208:1990 jp90
jis04 JIS X 0213:2004 jp04
simplified None, use the simplified Chinese glyphs smpl
traditional None, use the traditional Chinese glyphs trad
These values control the sizing of figures used for East Asian characters. Two values are possible:
  • proportional-width activating the set of East Asian characters which vary in width. It corresponds to the OpenType values pwid.
  • full-width activating the set of East Asian characters which are all of the same, roughly square, width metric. It corresponds to the OpenType values fwid.

Formal syntax

normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]

<east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]
<east-asian-width-values> = [ full-width | proportional-width ]



<p class="normal">!</p>


p {
  font-variant-east-asian: ruby;


Live sample link


Specification Status Comment
CSS Fonts Module Level 3
The definition of 'font-variant-east-asian' in that specification.
Candidate Recommendation Initial definition

Browser Compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support63 No


24 — 341

No50 No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support6363 No


24 — 341

50 No No

1. From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Document Tags and Contributors

Contributors to this page: HarJIT, mfluehr, fscholz, pborenstein, ledakis, Ruggero, Sebastianz, teoli
Last updated by: HarJIT,