css WordPress不加载自定义字体

nnt7mjpx 于 2023-04-08 发布在 WordPress

关注(0)|答案(1)|浏览(228)

我或多或少是新的WordPress，因此请对我宽容.我想使用自定义托管字体，因此我添加了以下代码到我的主题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");
}

并将自定义类courier添加到元素中以使用其他字体。
自定义CSS部分看起来像这样：

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

但结果呈现了另一种字体（看起来它使用的是macOS的“monospace”字体，而不是“Courier Prime”）：

我做错了什么？

css

来源：https://stackoverflow.com/questions/75930467/wordpress-does-not-load-custom-fonts

1条答案

按热度按时间

qpgpyjmq1#

我可以通过另一种方法很容易地解决这个问题：
我将字体数据添加到我的主题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"
},

在那之后，我可以通过自定义css和直接在 gutenberg 的“排版”样式选项卡中设置字体。

赞(0）回复(0）举报 2023-04-08

我来回答

css WordPress不加载自定义字体

1条答案

相关问题

热门标签

最新问答