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?

Recommended Answers

All 8 Replies

Do you have this site online so we can take a look?

I certainly have: http://bit.ly/1ct3Vhr

The website is written in Dutch but I think you won't have to read the website's content to discover how the architecture is built ;).

I don't see the issue. Browser specific perhaps?

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

And in IE as well.

Which version? I didn't see it in my IE.

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.

Hi,
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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.