0

I'm recreating an website. That old website uses two different webfont I'd like to take over to the new one.

The first font is one of googles web fonts. It is embedded using googles following suggested code (just a CSS file containing the actual usage): 

<link href="//fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">

This works on both the old and the new website!

The other font however is causing problems in firefox on the new website, but displaying perfectly fine on the old one. It's embedded using the exact same code, except that I'm using absolute paths on the new website:

@font-face {
    font-family: 'bebasneue-webfont';
    src: url('http://example.com/fonts/BebasNeue-webfont.eot');
    src: url('http://example.com/fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://example.com/fonts/BebasNeue-webfont.woff') format('woff'),
         url('http://example.com/fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('http://example.com/fonts/BebasNeue-webfont.svg#bebas_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Why is the google font displayed correctly while the other one just won't load?

Ry-
  • 218,210
  • 55
  • 464
  • 476
kot
  • 65
  • 1
  • 6
  • Check the console. Cross-domain font embedding probably isn’t allowed. You should host the font on the new website regardless. – Ry- Aug 21 '14 at 19:04
  • But the google font is working perfectly – kot Aug 21 '14 at 19:04
  • The stylesheet for the Google font comes from Google, for one. They might also have CORS enabled. Did you check the console? – Ry- Aug 21 '14 at 19:06
  • you realize your code has "xxx" where it looks like "www" should go, correct? that can cause an issue – racecarjonathan Aug 21 '14 at 19:06
  • @minitech I just checked the console and you are right. Firefox is clearly stating that I can not access two of the font files due to the 'Same-Origin-Rule' and it even suggests moving the ressource or activating "CORS". As I am not allowed to move the fonts to the new domain I will now look up CORS. – kot Aug 21 '14 at 19:10
  • The offending font has not been identified, and the URLs given for it are fake. The answer appears to be that this is a CORS issue, but no *reproduceable problem* has been presented. – Jukka K. Korpela Aug 21 '14 at 19:16
  • @minitech It seems the problem can be solved by making the sending server set "Access-Control-Allow-Origin: *" in its response. Unfortunately I don't have the necessary access to that server either. So basically i have the necessary files (downloaded from the original creator), I just need to make them accessible. Is there a website offering an upload service for fonts or something? – kot Aug 21 '14 at 19:23
  • Not allowed how? If it’s for legal reasons, how can you upload them to a different host? – Ry- Aug 21 '14 at 19:30
  • See if [this answer][1] can help you [1]: http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie?rq=1 – roymckrank Aug 21 '14 at 21:10
  • @minitech "Not allowed" as in "no access to the servers configuration". Like i said i got all needed files from the original creator – kot Aug 21 '14 at 23:46
  • @kot: No, as in not being allowed to move the files to the new domain. Why not? – Ry- Aug 22 '14 at 01:12
  • The new hoster is only providing a single web interface to configure one specific website. That system does not allow file uploads... – kot Aug 22 '14 at 13:30

0 Answers0