Search code examples
csswordpressfonts

Wordpress does not load custom fonts

I am more or less new to Wordpress, therefore please be lenient with me. I want to use a custom hosted font and therefore I added following code to my themes style.css:

@font-face {
    font-family: "Courier Prime";
    font-weight: normal;
    font-style: normal;
    src: url("fonts/Courier_Prime/CourierPrime-Regular.ttf") format("truetype");
    src: url("fonts/Courier_Prime/CourierPrime-Regular.woff") format("woff");
    src: url("fonts/Courier_Prime/CourierPrime-Regular.woff2") format("woff2");
}

and added the custom class courier to the elements to use the other font.

The custom css part looks like this:

.courier {
    font-family: "Courier Prime", monospace !important;
}

But the result renders another font (seems like it uses the "monospace" font of macOS, not "Courier Prime"):

image shows that the "Menlo" font is being used

What am I doing wrong?

Solution

  • I was able to solve this problem quite easily through another method:

    I added the font data to my themes theme.json:

    {
                    "fontFace": [
                        {
                            "fontFamily": "Courier Prime",
                            "fontStretch": "normal",
                            "fontStyle": "normal",
                            "fontWeight": "400",
                            "src": [
                                "file:./assets/fonts/courier-prime/CourierPrime-Regular.woff2"
                            ]
                        },
                        {
                            "fontFamily": "Courier Prime",
                            "fontStretch": "normal",
                            "fontStyle": "italic",
                            "fontWeight": "400",
                            "src": [
                                "file:./assets/fonts/courier-prime/CourierPrime-Italic.woff2"
                            ]
                        },
                        {
                            "fontFamily": "Courier Prime",
                            "fontStretch": "normal",
                            "fontStyle": "normal",
                            "fontWeight": "700",
                            "src": [
                                "file:./assets/fonts/courier-prime/CourierPrime-Bold.woff2"
                            ]
                        },
                        {
                            "fontFamily": "Courier Prime",
                            "fontStretch": "normal",
                            "fontStyle": "italic",
                            "fontWeight": "700",
                            "src": [
                                "file:./assets/fonts/courier-prime/CourierPrime-BoldItalic.woff2"
                            ]
                        }
                    ],
                    "fontFamily": "\"Courier Prime\", monospace",
                    "name": "Courier Prime",
                    "slug": "courier-prime"
},

    After that I was able to set the font via custom css and directly in the "typography" style tab of Gutenberg.