@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

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