Font Custom Not Rendering Fonts in Chrome

Question

I have an issue in Chrome only when developer tools is closed.

Basically as you can see from above the icons which are a custom font on occasion don't output at all.

For those who can't see the image the icons which are being output via css :before content are being output as, for-example ï…ˆ instead of the icon.

Below is an example of the css output:

.blog_module #page_content .social_buttons ul li.facebook a:before, .blog_module #pre_content .social_buttons ul li.facebook a:before {
  content: "ï„";
  font-family: 'icons';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

I know the content is ï„ personally I'm not sure why fontcustom outputs it in this way but 9/10 it works.

I thought it might be character encoding? but why does it only happen occasionally?

Does anyone know what this is and how to fix it?

I also thought it might not be downloading in time but wouldn't it then change once the font has downloaded? That's what usually happens...

Any thoughts, suggestions or answers and I'll be extremely grateful!

Answer 1

Sounds like you have some good suggestions, but the answer I would give you, would be - don't use icon fonts.

If you checkout fontastic.me - there is an option to output SVG icon sprites instead.

It is much more cross-compatible - and a pleasure to work with.

"SVG seems to just work (when supported). Icon fonts seem to fail in weird ways. For instance, you map the characters to normal letters, then the font loading fails and you get random characters abound. Or you map to "Private Use Area" and some browsers decide to re-map them to really weird characters like roses, but it's hard to replicate. Or you want to host the @font-face files on a CDN, but that's cross-origin and Firefox hates that, so you need your server to serve the right cross-origin headers, but your Nginx setup isn't picking that up right, SIGH." - Chris Coyier

article here: http://css-tricks.com/svg-sprites-use-better-icon-fonts/

and another good break down from Ian Feather: http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/

If you get a little snippet going, these are really quick to implement.

The icon fonts just have too many anomalies to account for.