@font-face 在 Wordpress 网站上不起作用

Question

我正在使用 @font-face 函数在我的 Wordpress 网站上使用自定义字体 (Geosanslight)。

我已经使用http://www.fontsquirrel.com 下载了webkit 并将它们上传到文件夹http://www.lynnepassmore.com/public_html/wp-content/themes/esteem/fonts。

然后我在我的自定义 css 文件中使用了 @font-face 函数来调用它们。但是该字体在任何浏览器上均不可见。

这是我的@font-face css：

@font-face {
font-family: 'geosanslight';
src: url('../fonts/geosanslight-webfont.eot');
src: url('../fonts/geosanslight-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/geosanslight-webfont.woff2') format('woff2'),
url('../fonts/geosanslight-webfont.woff') format('woff'),
url('../fonts/geosanslight-webfont.ttf') format('truetype'),
url('../fonts/geosanslight-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

body, h1, h2, h3, h4, h5, h6, p, li, a {
font-family: geosanslight !important;
}

Answer 1

您的自定义 css 实际上在源代码索引中，因此相对路径不起作用。如下更改字体路径。

@font-face {
font-family: 'geosanslight';
src: url('/wp-content/themes/esteem/fonts/geosanslight-webfont.ttf') format('truetype');
}

和

body, h1, h2, h3, h4, h5, h6, p, li, a {
font-family: "geosanslight",sans-serif;
}

请确保你的最终css是这样的

@font-face {
font-family: 'geosanslight';
src: url('/wp-content/themes/esteem/fonts/geosanslight-webfont.ttf') format('truetype');
}

body, h1, h2, h3, h4, h5, h6, p, li, a {
font-family: 'geosanslight', sans-serif !important;
}

Answer 2

检查您的浏览器控制台：

来自“http://www.lynnepassmore.com”的字体已被阻止 通过跨域资源共享策略加载：否 'Access-Control-Allow-Origin' 标头出现在请求的 资源。因此不允许使用原点“http://lynnepassmore.com” 访问。

您正在尝试从不同的域（www 与不带 www）加载字体 - 它被视为远程资源，并被标头策略阻止。

如果您从 css 文件中包含字体，则可以使用相对路径，那么它将相对于您的 css 文件位置。