Search code examples
cssgoogle-chromefirefoxfontsfont-face

@font-face strange behaviour in Firefox and Chrome

I'm having a strange problem with @font-face in Firefox and Chrome. It appears that the font is displaying correctly on the index page and any page directly linked from the index page. However as soon as I visit a page from the index page and then click a link in that page, the font is broken in the new page.

If that's a bit hard to follow then the site address is http://www.sungblue.com. Font displays fine on the home page. If I click weddings on the menu bar then the font is fine in that page also. However if i go into the 'common questions' page from the weddings page then font is broken.

I can't understand why this is happening as I've checked all code and it's the same across all pages, any ideas why this only affects some pages?

This is how my @font-face code looks:

@font-face 
{
font-family: 'elron';
src: url('http://www.sungblue.com/Fonts/Elron/elronmonospace-webfont.eot'); /* IE9 Compat Modes */
src: url('http://www.sungblue.com/Fonts/Elron/elronmonospace-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('http://www.sungblue.com/Fonts/Elron/elronmonospace-webfont.woff') format('woff'), /* Modern Browsers */
     url('http://www.sungblue.com/Fonts/Elron/elronmonospace-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('http://www.sungblue.com/Fonts/Elron/elronmonospace-webfont.svg#svgelron') format('svg'); /* Legacy iOS */
}

Any suggestions you have are very welcome. Thanks

Dan

Solution

  • The reason you have is the URL. When you are in the home page or directly under that, the URL is:

    http://www.sungblue.com/weddings.html

    Where as in the Common Questions, the URL is without www:

    http://sungblue.com/weddingfaq.html

    Try to standardise the www.sungblue and sungblue links using either .htaccess or internal redirect. The same Common Questions page works, if you use the below link:

    http://www.sungblue.com/weddingfaq.html