Search code examples
cssgoogle-chromewebfontstypographyopentype

Old-style figures ("onum") not working in Chrome

Using the old-style figures OpenType feature with font-feature-settings: "onum" is not working in Chrome. It works in all other major browsers, such as Safari for Mac and iOS, and Firefox.

How can one activate old-style figures in a web font that will also work in Chrome?

OpenType figures

Here is an example:

@font-face {
  font-family: "Garamond Premier Pro Display";
  font-weight: 700;
  font-style: normal;
  font-feature-settings: "onum"; /* Activate oldstyle figures */
  src: url("https://use.typekit.net/af/6abdec/00000000000000003b9ade3b/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2")
}

html, body { height: 100% }

body {
  display: grid;
  place-items: center
}

h1 { font: 700 calc(9rem / 2)/1 "Garamond Premier Pro Display" }
<h1>1776</h1>

Solution

  • I’m posting the Q&A for anyone who is struggling with this. After a lot of trial and error, I figured how to do it.

    To activate old-style figures in Chrome, one needs to use:

    font-variant-numeric: oldstyle-nums


    @font-face {
  font-family: "Garamond Premier Pro Display";
  font-weight: 700;
  font-style: normal;
  font-feature-settings: "onum"; /* Activate oldstyle figures */
  src: url("https://use.typekit.net/af/6abdec/00000000000000003b9ade3b/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2")
}

html, body { height: 100% }

body {
  display: grid;
  place-items: center
}

h1 {
  font: 700 4.5rem/1 "Garamond Premier Pro Display";
  font-variant-numeric: oldstyle-nums /* Activate oldstyle figures in Chrome */
}
    <h1>1776</h1>