Custom font not loading on first visit

I created a new website (http://www.glutenfreekate.com) and used a custom font that I'm including in the style.css. I have worked with custom fonts before and never had any trouble. This time I have the following problem:

When I visit the page for the first time or after emptying the cache the font is not loading. In other words: There is no text. It's not using another font but none at all. It seems to leave room for the words though. It just seems to be invisible. When I click anywhere on the page it gets loaded and on every following visit it will be there.

The problem only seems to exist in the current Chrome.

I tried adding it in the style.css that imports all the other style sheets and at the very top of the style sheet that uses the font. Both didn't help.

I tried renaming the font files and font name but without any success.

Here's the code:

@font-face {

font-family: 'aaarghnormal';
  src: url('../katebreuerme/fonts/aaargh.eot');
  src: url('../katebreuerme/fonts/aaargh.eot?#iefix') format('embedded-opentype'),
  url('../katebreuerme/fonts/aaargh.woff') format('woff'),
  url('../katebreuerme/fonts/aaargh.ttf') format('truetype'),
  url('../katebreuerme/fonts/aaargh.svg#aaarghnormal') format('svg');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "aaarghnormal", Helvetica, Century Gothic, Verdana, sans-serif, serif, Courier, monospace;
}

Any ideas on how to solve this? I don't think it's good if my readers don't see the font on their first visit...

Thanks!

Answers


It's maybe nothing but you have :

@import url("css/style.css");

@font-face {
    font-family: 'aaarghnormal';
    src: url('../katebreuerme/fonts/aaargh.eot');
    src: url('../katebreuerme/fonts/aaargh.eot?#iefix') format('embedded-opentype'),
    url('../katebreuerme/fonts/aaargh.woff') format('woff'),
    url('../katebreuerme/fonts/aaargh.ttf') format('truetype'),
    url('../katebreuerme/fonts/aaargh.svg#aaarghnormal') format('svg');
    font-weight: normal;
    font-style: normal;
}

Is your css/style.css use the font ? because maybe the first time the font is not loaded yet and you try to use it on the css/style.css, am I wrong ?

Try to change that and load the font first and include the css/style.css directly in the html file.. Not sure if that will save your problem but it costs nothing to try


Need Your Help

Selecting One Particular Data Item

apache-flex mxml

I've created an Flex app. It currently has an drop down menu. With the option to select a Channel. Once the channel is selected the data pulls through. But, what I want to do is just pull through one

How to parse this json in jquery?

javascript jquery json node.js

I have this 'json return' from node/express js but has problem parsing it. Needed some advice on how to do so.