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

检查浏览器控制台：

来自原点的字体＆＃39; http://www.lynnepassmore.com＆＃39;已被封锁通过跨源资源共享策略加载：否＆＃39;访问控制允许来源＆＃39;标题出现在请求的上资源。起源＆＃39; http://lynnepassmore.com＆＃39;因此是不允许的访问。

您尝试从其他域加载字体（www vs without www） - 它被视为远程资源，并被标头政策阻止。

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

@ font-face无法在Wordpress网站上运行

2 个答案: