@font-face not working on Wordpress site

问题

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

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.

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.

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;
}

回答1:

Check on your browser console :

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.

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.

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.

回答2:

Your custom css is actually in the source code index, hence the relative path wont work. Change your font paths as follow.

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

and

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

please make sure your final css is like this

@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;
}

来源：https://stackoverflow.com/questions/31543066/font-face-not-working-on-wordpress-site