How to show slashed zero in css?

[ShahriarKh]

I'm loading the font from Google fonts like this:

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap");

I want to set the font to show slashed zero instead of default zero with a dot inside. How can I do this? I tried font-variant-numeric: slashed-zero and font-feature-settings: 'zero' 0 but no luck. Is it even supported or not?

(I'm aware of #8, but the main discussion there is IDEs, not CSS)

[alexeyten]

I guess google fonts' version doesn't contain slashed zero.

[philippnurullin]

@ShahriarKh The version on Google font have slashed zero. Try font-feature-settings: 'zero' 1;

Here is a more info about OpenType features in CSS. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/OpenType_fonts_guide

[ShahriarKh]

Sorry for raising this closed issue. I'm trying to use slashed-zeros with the new @next/font (https://nextjs.org/docs/pages/api-reference/components/font) but it doesn't work. I tried:

import { JetBrains_Mono } from "next/font/google";

const jetbrains = JetBrains_Mono({
  weight: "600",
  subsets: ["latin"],
  declarations: [
    {
      prop: "font-feature-settings",
      value: '"zero" 1',
    },
  ],
});

But it doesn't work. Is there a problem with next/font, the JetBrains Mono version on Google Fonts, or something else?

Update:

When I use local font, it works:

import localFont from "next/font/local";

const jetbrains = localFont({
  src: "../public/fonts/jb.ttf",
  display: "swap",
  subsest: ["latin"],
  weight: "600",
  declarations: [
    {
      prop: "font-feature-settings",
      value: '"zero" 1',
    },
  ],
});

so I think there's a problem with the Google Fonts version.

[kenmcd]

Google Fonts webfonts have a limited set of OpenType features. They do not have zero, or stylistic sets ssXX, or character variants cvXX, etc. See discussion here: Why don't all OpenType features work in fonts served via the API? #1335 https://github.com/google/fonts/issues/1335

Features covered as of today (2023-05-12) from here: https://github.com/fonttools/fonttools/blob/main/Lib/fontTools/subset/__init__.py#L3028-L3078

    # Based on HarfBuzz shapers
    _layout_features_groups = {
        # Default shaper
        "common": ["rvrn", "ccmp", "liga", "locl", "mark", "mkmk", "rlig"],
        "fractions": ["frac", "numr", "dnom"],
        "horizontal": ["calt", "clig", "curs", "kern", "rclt"],
        "vertical": ["valt", "vert", "vkrn", "vpal", "vrt2"],
        "ltr": ["ltra", "ltrm"],
        "rtl": ["rtla", "rtlm"],
        "rand": ["rand"],
        "justify": ["jalt"],
        "private": ["Harf", "HARF", "Buzz", "BUZZ"],
        # Complex shapers
        "arabic": [
            "init",
            "medi",
            "fina",
            "isol",
            "med2",
            "fin2",
            "fin3",
            "cswh",
            "mset",
            "stch",
        ],
        "hangul": ["ljmo", "vjmo", "tjmo"],
        "tibetan": ["abvs", "blws", "abvm", "blwm"],
        "indic": [
            "nukt",
            "akhn",
            "rphf",
            "rkrf",
            "pref",
            "blwf",
            "half",
            "abvf",
            "pstf",
            "cfar",
            "vatu",
            "cjct",
            "init",
            "pres",
            "abvs",
            "blws",
            "psts",
            "haln",
            "dist",
            "abvm",
            "blwm",
        ],
    }

So to get zero you need to host the fonts yourself.

You can also use the OpenType Feature Freezer to "freeze" the slashed zero into the font (so it is the default zero form).