After configuring the CSS file using the fontface generator from fontsquirrel.com and uploading the font files to the correct directory, the fonts on my website function properly. However, there is an issue where the fonts do not display the first time a user enters the website until the page is refreshed, occurring in both Firefox and Chrome.
The CSS code at the top of my file looks like this:
@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'); }
Below is the code for applying the font to paragraphs on my pages:
.body p { font-family:handfont-webfont; font-size: 12px; padding:5px 5px; margin:0; }
I have searched for a solution to this problem but have been unsuccessful so far. Any assistance would be greatly appreciated. Thanks, everyone!