@font-face not working on Wordpress site

Question

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

Answer 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.

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