1

I have created a new page on my company website. It looks awesome but only in Google Chrome.

The fonts do not display correctly within Internet explorer nor Firefox.

Here is the link to the page. (the actual content is inside an iframe which is http://www.lynch.ie/test/map.html)

http://www.lynch.ie/test/test.html

Thanks,

Please help me, im on my knees with this one! Thank you in advance.

David L.

Dmitry Pashkevich
  • 12,206
  • 9
  • 49
  • 68
  • Useful links: http://www.fontsquirrel.com/tools/webfont-generator and http://stackoverflow.com/questions/220236/how-to-embed-fonts-in-html – Bram Vanroy Sep 28 '13 at 16:31
  • I get a `CSS3117` error several times when viewing your site using IE 10! Please take a look at the dev console (`F12`). – ComFreek Sep 28 '13 at 16:31
  • Thanks guys ill read over all of this and see what I can come up with. Appreciate both your time. – David Lynch Sep 28 '13 at 17:15

1 Answers1

3

It seems that you're loading the font files from a different domain.

Firefox and possibly IE do not allow that unless you set a Access-Control-Allow-Origin header, sample (credits to Callum Silcock's blog article):

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>
ComFreek
  • 27,416
  • 16
  • 97
  • 150
  • that's true, ive tried adding them locally to http://www.lynch.ie/test/fonts/ and updating the .css file but it doesn't seem to work? – David Lynch Sep 28 '13 at 16:50
  • @DavidLynch I changed the `font-family` property (using dev console) to `"GothamLight","Wingdings"` and IE shows me the Wingdings font. The first font cannot be loaded somehow. – ComFreek Sep 28 '13 at 17:04
  • @DavidLynch Try putting the EOT file as the last source (see [this post](http://stackoverflow.com/a/14506177/603003)). Is the problem solved because you accepted my answer? – ComFreek Sep 28 '13 at 17:11
  • ill try using google fonts maybe and load them in the html directly and see how that works out... many thanks for your help. – David Lynch Sep 28 '13 at 17:14
  • Hey again, I hit the accept because I liked your reply. Didn't know it meant that I accepted your answer as a fix. Im new sorry about that. – David Lynch Sep 28 '13 at 17:17
  • I will read that post over now and see what I can come up with. Thank you. – David Lynch Sep 28 '13 at 17:17
  • @DavidLynch I would set up a simple test file on your server with only minimal HTML and CSS. Try if IE can load the font on that site. (Accepting means that my post has solved/answered your question/problem.) – ComFreek Sep 28 '13 at 18:07