1

I'm having trouble getting a font to display in Google Chrome (Version 51.0.2704.106 (64-bit))

Safari and Firefox work fine.

Here is the code I am using as an example.

@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 */
   font-weight: normal;
   font-style: normal;
}

I have converted the font to woff2 on multiple sites. What might the problem be?

SamYoungNY
  • 6,444
  • 6
  • 26
  • 43

1 Answers1

1

I recently had browser issues implementing @font-face on a website. Here were some of the solutions that worked:

  1. Try using "" instead of '' for the url and format
  2. Try not calling .svg last
  3. Try specifying font-weight and font-style for each @font-face reference
  4. Did you correctly reference the font-family later in the CSS?

With all the above changes, your code might look like this:

@font-face {
    font-family: "MyWebFont";
    src: url("webfont.eot"); /* IE9 Compat Modes */
    src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("webfont.svg#svgFontName") format("svg"); /* Legacy iOS */
    url("webfont.woff2") format("woff2"), /* Super Modern Browsers */
    url("webfont.woff") format("woff"), /* Pretty Modern Browsers */
    url("webfont.ttf")  format("truetype") /* Safari, Android, iOS */
    font-weight: normal;
    font-style: normal;
}

Later on in the stylesheet:

body {
    font-family: "MyWebFont";
}
Emma Earl Kent
  • 498
  • 5
  • 12
  • thx for your response.. 1. I tried replacing '' with "" - I also tried removing "" altogether. 2. I removed .svg altogether as I don't have one - 3. Did specify font-weight and font-style - 4. Did correctly reference later in CSS (set font-family in the body).. No luck – SamYoungNY Jul 26 '16 at 19:14