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