0

I have a website A with css and custom font which all work fine. Now I'm trying to refer to this css from my website B. Everything works fine css-wise, except that the font is not applied. When I look under the network tab of Firefox console, everything is loaded correctly, including the custom font.

Here is how I declared the font in my css:

@font-face {
    font-family: 'Raleway Light';
    src: url('http://website-a.com/fonts/Raleway-Light.ttf');
}

* {
    font-family: 'Raleway Light', sans-serif;
}

I also tried to refer to the .ttf with relative path src: url('../fonts/Raleway-Light.ttf'); but it doesn't work either.

Any insight?

PS.: I tried different browser and cleaning the cache already.

Gaetan L.
  • 649
  • 6
  • 20

2 Answers2

0

Firefox does not allow cross-domain font embedding. See this similar question for various solutions.

Community
  • 1
  • 1
shipshape
  • 1,682
  • 2
  • 17
  • 33
  • Okay thanks for your answer, but 2 remarks first, I tried on Chrome and IE and it didn't work either. And second, when I look into the network tool, I can see a code 200 for my font file when I load page on website B. So it seems it succeeded in downloading the font doesn't it? – Gaetan L. Jan 22 '17 at 09:39
0

.ttf is for windows fonts and true type fonts(.ttf) does not work on some browsers.

If you want use a font on web you better have the font in formats .ttf, .woff, .eot all and use them all to support all browsers. And I do not agree this speak

Firefox does not allow cross-domain font embedding

Because i tested that previously and worked.

And in relative src please see if your @font-face style is in the html file or is in the external css file because each one has its src. Some times it make us confused.

Farzin Kanzi
  • 3,380
  • 2
  • 21
  • 23