CODEWITHSUNDEEP
htmlcssfontsfont-facewebfonts
vision
vision

Reputation: 1

@font-face doesn't work on some computers

I'm using @font-face in my project for loading a specific webfont ("Amsi Pro"). The main problem is that it works on most of the computers I tested, but not on all (On those where it didn't work other websites with @font-face still worked).

Is there anything I've missed, or any server settings to set that will give me full support?

Some information of a PC where @font-face doesn't work: whatsmybrowser.org/b/Q2TJ80F

Live Preview: christlicher-gesundheitskongress.de

CSS:

@font-face {
  font-family: 'AmsiPro';
  font-weight: 400;
  src: url('../webfonts/2E508B_0_0.eot');
  src: url('../webfonts/2E508B_0_0.eot?#iefix') format('embedded-opentype'),
       url('../webfonts/2E508B_0_0.woff2') format('woff2'),
       url('../webfonts/2E508B_0_0.woff') format('woff'),
       url('../webfonts/2E508B_0_0.ttf') format('truetype');
}

@font-face {
  font-family: 'AmsiPro';
  font-weight: 600;
  src: url('../webfonts/2E508B_1_0.eot');
  src: url('../webfonts/2E508B_1_0.eot?#iefix') format('embedded-opentype'),
       url('../webfonts/2E508B_1_0.woff2') format('woff2'),
       url('../webfonts/2E508B_1_0.woff') format('woff'),
       url('../webfonts/2E508B_1_0.ttf') format('truetype');
}

html,body {
    font-family: 'AmsiPro', Helvetica, sans-serif;
}

Upvotes: 0

Views: 1392

Answers (1)

salad_bar_breath
salad_bar_breath

Reputation: 281

Even though it seems that Firefox 38 should support @font-face, there may be a partial use issue. Try using an app like Font-Squirrel to develop an SVG of your font and then reorder your @font-face like so:

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

Per this source, it should maximize the amount of support your font has.

Hope this helped!

Upvotes: 1

Related Questions