Member Avatar for minitauros

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?

  • 4 Contributors
  • 8 Replies
  • 434 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by pamsb2

Dani AI

Generated

Brief summary and context: described a webfont that falls back to a system font on the site’s main page but appears correctly after navigating to another page. noticed it was browser-specific and flagged a nonstandard @font-face declaration. That symptom set—works in Chrome but not on first load in Firefox/IE—usually points to how the font is delivered or declared rather than a pure renderer bug.

Likely causes to check (and quick diagnostics): incorrect @font-face syntax or ordering; using the same family name as an installed system font (which can cause a local fallback then a swap); fonts blocked by cross-origin rules; missing/404 font files or wrong MIME types; or the font CSS loading too late. A practical diagnostic is to capture a fresh initial-page load with the browser DevTools Network and Console panels and look for blocked requests, CORS errors, 404s, or warnings about font formats.

Practical fixes that resolve this pattern: make sure the @font-face rules are in a stylesheet loaded in the page head (or include critical rules inline) so fonts are requested early; avoid naming the webfont exactly the same as a system font (use a unique family name); add font-display: swap to control flash behavior; ensure server sends correct MIME types and an appropriate Access-Control-Allow-Origin header when fonts come from another origin; consider rel="preload" as="font" crossorigin for key fonts; clear caches and retest in a private window. For older IE variants, confirm the EOT resource and format handling are correct.

Tieback: following ’s note about CSS syntax and ’s browser checks usually reveals the culprit; Chrome’s leniency can mask problems that Firefox/IE expose, so the Network/Console output from the initial load is the best evidence for a definitive fix.

Recommended Answers

All 8 Replies

Member Avatar for JorgeM

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

Member Avatar for minitauros

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 ;).

Edited by minitauros
Member Avatar for pritaeas

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

Member Avatar for minitauros

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

EDIT: And in IE as well.

Edited by minitauros
Member Avatar for JorgeM

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');
}
Member Avatar for pritaeas

And in IE as well.

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

Member Avatar for minitauros

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.

Member Avatar for pamsb2

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.