Question

我有一些自定义字体，我想使用webpack通过CSS导入。

css：

@font-face {
    font-family: 'SBonusDisplay';
    src: url('../../assets/fonts/SBonusDisplay-Regular.ttf')
}

h2 {
    font-family: 'SBonusDisplay' !important;
    font-style: normal;
    font-size: 1.125rem;
}

这是我的webpack配置的一部分：

{
                test: /\.(woff(2)?|ttf|eot|otf|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name]-[hash:base58:3].[ext]',
                            outputPath: 'fonts/'
                        }
                    }
                ]
            }

由于某种原因，未显示正确的字体。它完全不同的字体。知道我在做什么错吗？

您知道我正在使用PWA Studio Magento Web应用程序时，webpack配置很长，这就是为什么我只粘贴与加载字体相关的部分。

Answer 1

您能提供这个网站的网址吗？并请使用https://www.fontsquirrel.com/tools/webfont-generator

创建一个合适的fontkit

希望您会得到想要的结果

自定义字体未显示在网站中

1 个答案: