Start New Discussion within our UI / UX Design Community

Does anybody know of a reason why a custom font would not load directly when a web page is loaded? When I visit the main page of my website, it uses a standard font instead of the custom font I selected, but if I then go to another page, that page does use the custom font, and when I then go back to the main page, the custom font is working all of a sudden. Anyone know how to fix this?

Hm yes, now that you mention it, it appears only to occur in Firefox.

EDIT: And in IE as well.

I'm not a CSS3 Web Fonts guru... but your CSS doesnt appear to be written 100% correctly. For example, you included the src property two times. I havent seen it written in that manner in the past. Nothing else seems to jump at me as something that could be causing this error. try fixing this issue and see if it resolves your problem.

@font-face {
    font-family: 'Candara';
    src: url('candara.eot');
    src: url('candara.eot') format('embedded-opentype'),
         url('candara.woff') format('woff'),
         url('candara.ttf') format('truetype'),
         url('candara.svg#CandaraRegular') format('svg');

I'm using IE10. Might be caused by me removing some lines from my CSS font file. I'm trying if it works if I specify a .ttf font only, but apparently it doesn't (at least not over here). Only Chrome appears to be loading the correct font file on the fist page load; Firefox and IE both aren't over here. Weird but I guess I'll have to do with this for now.

I'll be pleased to help u but I compare the only 2 pages and i don't see any difference about the font...
Perhaps you could help me to navigate.

This article has been dead for over six months. Start a new discussion instead.