Custom font not loading on first visit

3 Views

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.

Read More

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!

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. 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