1

On my website I call a font that is on an other website :

@font-face {
                font-family: Gotham;
                src: url('http://www.myOtherSite.com/Gotham-Book.ttf');
                font-weight: 600;
            }

It works on Safari, I can see the right font, but not on Chrome or Firefox. Do you have any idea why ?

Thank you,

Nicolas Roy
  • 3,773
  • 5
  • 27
  • 42

2 Answers2

2

You will need to convert your font to work on all browsers. (.woff, .woff2, .eot, .ttf + .svg)

http://www.fontsquirrel.com/tools/webfont-generator

These are the font types that each browser requires.

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Aaron
  • 10,187
  • 3
  • 23
  • 39
0

Replace:

src: url('http://www.myOtherSite.com/Gotham-Book.ttf');

With: 

src: url('http://www.myOtherSite.com/Gotham-Book.ttf') format('truetype');

That works for me :)

Chris G
  • 787
  • 6
  • 20