Search code examples
htmlgoogle-chromecssfont-face

Google Chrome wont show font (css3, html5) first time visiting. (only on refresh)

I have a website using CSS3

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

where the fonts that are specified in my code wont show the first time I visit the site (only in Google Chrome), even if I press a link to go to another page it won't update the font correctly. ONLY when I press the F5 key to update the site it renders the correct font. Tried alot of different fixes that may have an influence on this problem with no luck (That's why i have 2 @font-face...)

I've run out of options and are hoping there is someone that can help me on this subject.

Solution

  • SOULUTION:

    I found out that the problem wasnt in my CSS file at all.

    It turns out that in my index.php file the fonts that I am using in my webpage is coming from an googleapis.com site, like so: 

    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Playfair+Display:400italic' rel='stylesheet' type='text/css' />

    and in this "CSS" file, the font URL isn't encapsulated in: ' ' <-- these. And that seems to be a big problem for Google Chrome's webbrowser.

    I took the content of the googleapis.com generated CSS file, put it in my own CSS file and encapsulated the URL. Now it works fine!