'Custom font only works in Chrome, but not in Safari or Firefox

I have started a new Wordpress blog using the Twenty TwentyTwo theme as the base for my child theme. I want to replace the standard theme fonts with my own. In the frontend, this currently only works in Chrome. In Safari and Firefox I still get fonts used by the base theme. I have tried clearing the cache, but it didn't help. In the editor it's working for all browsers though.

This is what I did: I placed the fonts (all WOFF) into a subfolder 'fonts' of my child theme. In my theme.json file I have the following:

{
    "version": 2,
    "settings": {
        "typography": {
            "dropCap": false,
            "fontFamilies": [
                {
                    "fontFamily": "Goldman-Regular",
                    "name": "Goldman Regular",
                    "slug": "goldman-regular"
                }
            ]
        }
    }
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source