Open Sans and theme.json

I’m here to share an experience, I hope this can be solved sooner or later, because it took me a lot of time to figure out.

I registered a custom FontFamily in the theme.json. It looked like this:

{
    "name":         "Open Sans",
    "slug":         "open-sans",
    "fontFamily":   "Open Sans",
    "fontFace": [
        {
            "fontFamily":   "Open Sans",
            "fontStyle":    "normal",
            "fontWeight":   "400",
            "src": [
                "file:./open-sans-latin-400.woff2",
                "file:./open-sans-latin-400.woff",
                "file:./open-sans-latin-400.ttf"
            ]
        },
        {
            "fontFamily":   "Open Sans",
            "fontStyle":    "normal",
            "fontWeight":   "800",
            "src": [
                "file:./open-sans-latin-800.woff2",
                "file:./open-sans-latin-800.woff",
                "file:./open-sans-latin-800.ttf"
            ]
        }
    ]
}

While this works perfectly fine in Safari, Chrome is, for reasons that are unknown to me, not happy with my code. I tried and tried, and couldn’t find the mistake. Also, in this there I included 3 other fonts, and the other 3 fonts are working without any problem.

Then I figured, maybe there’s a problem with that Open Sans is maybe a prohibited name or whatever. So I changed my theme.json to

{
    "name":         "Custom Font",
    "slug":         "open-sans",
    "fontFamily":   "Custom Font",
    "fontFace": [
        {
            "fontFamily":   "Custom Font",
            "fontStyle":    "normal",
            "fontWeight":   "400",
            "src": [
                "file:./open-sans-latin-400.woff2",
                "file:./open-sans-latin-400.woff",
                "file:./open-sans-latin-400.ttf"
            ]
        },
        {
            "fontFamily":   "Custom Font",
            "fontStyle":    "normal",
            "fontWeight":   "800",
            "src": [
                "file:./open-sans-latin-800.woff2",
                "file:./open-sans-latin-800.woff",
                "file:./open-sans-latin-800.ttf"
            ]
        }
    ]
}

And… it bloody works. Please tell me, what is going on here, and how was I supposed to know that using the name “Open Sans” is causing problems?

• This topic was modified 1 year, 9 months ago by Jelle Tempelman.