Search code examples
htmlcssfont-face

Font-face glyph rendering issue on Chrome and Opera

I am currently developing an ASP.MVC web project in Visual Studio 2013 and have come across a strange issue when rendering glyphs using font-face in Chrome (39.0.2171.99 m) and Opera (26.0.1656.60).

I am using the latest Web Essentials release and using its SCSS pre-compiler. I have a small mixin for building the Css for the font as below.

@mixin font-face($font-family, $file-path, $font-weight, $font-style) {
  @font-face {
    font-family: $font-family;
      src: url('#{$file-path}.eot');
      src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
           url('#{$file-path}.woff') format('woff'),
           url('#{$file-path}.ttf') format('truetype'),
           url('#{$file-path}.svg##{$font-family}') format('svg');
    font-weight: $font-weight;
    font-style: $font-style;
  }

  // Chrome for Windows rendering fix: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    @font-face {
      font-family: $font-family;
        src: url('#{$file-path}.svg##{$font-family}') format('svg');
    }
  }
}

And calling the mixin in the SCSS file

@include font-face(Flat-UI-Icons, '../fonts/Flat-UI-Icons', 300, normal);

This gives me the following result in the css file

@font-face {
  font-family: Flat-UI-Icons;
  src: url('../fonts/Flat-UI-Icons.eot');
  src: url('../fonts/Flat-UI-Icons.eot?#iefix') format('embedded-opentype'), url('../fonts/Flat-UI-Icons.woff') format('woff'), url('../fonts/Flat-UI-Icons.ttf') format('truetype'), url('../fonts/Flat-UI-Icons.svg#Flat-UI-Icons') format('svg');
  font-weight: 300;
  font-style: normal; }

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @font-face {
    font-family: Flat-UI-Icons;
    src: url('../fonts/Flat-UI-Icons.svg#Flat-UI-Icons') format('svg'); }
 }

I am then loading the font-face glyph's with the below css

.glyph-button,.glyph-list,.glyph-textbox,.glyph-number {
    display: inline-block;
    font-family: 'Flat-UI-Icons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    font-size: 35px;
}

.glyph-button:before {
    content: "\e033";
}

.glyph-list:before {
    content: "\e00c";
}

.glyph-textbox:before {
    content: "\e019";
}

.glyph-number:before {
    content: "\e031";
}

And finally adding the glyph class to my ASP.MVC view

<h3><span class="glyph-list"></span> Components</h3>

The problem I have is that the font glyph do not render in either Chrome or Opera but they do in IE11 and FirefoxDeveloper.

Chrome / Opera

enter image description here

IE / Firefox

enter image description here

Any idea what the issue is?

Solution

  • Really simple fix to the mixin in the end. Required a simple cleanup of a couple of paths Flat-UI-Icons.svg#Flat-UI-Icons to Flat-UI-Icons.svg and adding the font-style and font-weight attributes to the -webkit implementation.

    @mixin font-face($font-family, $file-path, $font-weight, $font-style) {
  @font-face {
    font-family: $font-family;
      src: url('#{$file-path}.eot');
      src: url('#{$file-path}.eot?#iefix') format('eot'),
           url('#{$file-path}.woff') format('woff'),
           url('#{$file-path}.ttf') format('truetype'),
           url('#{$file-path}.svg') format('svg');
    font-weight: $font-weight;
    font-style: $font-style;
  }

  // Chrome for Windows rendering fix: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    @font-face {
        font-family: $font-family;
        src: url('#{$file-path}.svg') format('svg');
        font-weight: $font-weight;
        font-style: $font-style;
    }
  }
}

    Everything now renders as expected.