Question

I’ve properly configured the CSS file using the http://www.fontsquirrel.com/fontface/generator kit generator and css codes, uploaded the font files in the right directory.

The fonts work perfectly fine on my website after refreshing once entered for the first time even while switching between pages, it’s just that first time that the fonts don’t show when entering the website until you refresh the page, happens in both Firefox and Chrome.

css code in the top of my CSS file:

@charset "utf-8";
body { margin:0; padding:0; width:100%; background:url(images/bg.png) repeat; }
html { padding:0; margin:0; }
a { text-decoration:none; border: none; outline:none; }
a:hover { text-decoration:underline; }
a img {border: none; }

@font-face{ font-family: 'handfont-webfont'; src: url('text/handfont-webfont.eot'); src: url('text/handfont-webfont.eot?#iefix') format('embedded-opentype'), url('text/handfont-webfont.woff') format('woff'), url('text/handfont-webfont.ttf') format('truetype'), url('text/handfont-webfont.svg#webfont') format('svg'); }

Here’s the code of the font used for the paragraphs in my pages:

.body p { font-family:handfont-webfont; font-size: 12px; padding:5px 5px; margin:0; }

I tried looking for an answer but couldn’t find one, would really appreciate any help guys.

Answer 1

Have you tried to put the @font-face on top, before anything else in your CSS.

There is an error in your CSS:

.body p { font-family:handfont-webfont;}//there are no single quotes

Change it to:

.body p { font-family:'handfont-webfont';}//with single quotes