CODEWITHSUNDEEP
cssfont-face
Nicolas Roy
Nicolas Roy

Reputation: 3793

Fonts works on Safari, not on Google Chrome and Firefox

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,

Upvotes: 1

Views: 1460

Answers (2)

Aaron
Aaron

Reputation: 10430

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 */
}

Upvotes: 2

Chris G
Chris G

Reputation: 780

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 :)

Upvotes: 0

Related Questions