@ font-face不能在Wordpress网站上工作 [英] @font-face not working on Wordpress site

问题描述

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

I'm using the @font-face function to use a custom font (Geosanslight) on my Wordpress site.

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

I have downloaded the webkit using http://www.fontsquirrel.com and uploaded them into the folder http://www.lynnepassmore.com/public_html/wp-content/themes/esteem/fonts.

然后我在我的自定义css文件中使用了@ font-face函数来调用它们。

I have then used the @font-face function in my custom css file to call them. However the font is not visible on any browser.

这是我的@ font-face css：

Here is my @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;
}

推荐答案

源自「 http：/ /www.lynnepassmore.com '已被阻止从
加载由跨源资源共享策略：否
'访问控制允许原始标题存在于请求的
资源。原因 http://lynnepassmore.com 因此不允许
访问。

Font from origin 'http://www.lynnepassmore.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://lynnepassmore.com' is therefore not allowed access.

您尝试从不同的域（www而不是www）加载字体 - 它被认为是一个遥远的资源，并被标头策略阻止。

You're trying to load a font from a different domain (www vs without www) - it is considered as a distant resource, and blocked by the headers policy.

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

You can use relative path for your font if you include it from your css file, then it'll be relative to your css file location.

这篇关于@ font-face不能在Wordpress网站上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！