@ 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函数来调用它们。但是，字体在任何浏览器上都不可见。

这里是我的@字体面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' 字体有已被阻止从 通过跨源资源共享策略加载：否 “访问控制 - 允许来源”标题存在于请求的 资源中。原因'http://lynnepassmore.com'因此不允许 访问。

您试图从不同的域（www vs没有www）加载字体 - 它被认为是一个遥远的资源，并被头策略封锁。

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