Issues with using @font-face for social icons

HTML & CSS
1

I recently attempted to move to using a font via @font-face for my site’s social icons rather than using images but I am having rather mixed results, especially on mobile devices. Are these known issues or is there anything I can do to improve matters?

CSS

div.Social {
font-family: 'Mono Social Icons Font';
font-size: 50px;
text-align:center;
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}

div.Social a:link:hover, a:visited:hover, a:link:active, a:visited:active {
text-decoration:none;
}

@font-face {
font-family: 'Mono Social Icons Font';
src: url('http://www.westeros.org/Files/MonoSocialIconsFont-1.10.eot');
src: url('http://www.westeros.org/Files/MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
     url('http://www.westeros.org/Files/MonoSocialIconsFont-1.10.woff') format('woff'),
     url('http://www.westeros.org/Files/MonoSocialIconsFont-1.10.ttf') format('truetype'),
     url('http://www.westeros.org/Files/MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');
src: url('http://www.westeros.org/Files/MonoSocialIconsFont-1.10.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

HTML


<div class="Social">
<a href="https://www.facebook.com/Westeros" title="Westeros.org on Facebook">roundedfacebook</a>
<a href="https://plus.google.com/+westeros/" title="Westeros.org on Google+">roundedgoogleplus</a>
<a href="http://www.twitter.com/westerosorg" title="Westeros.org on Twitter">roundedtwitterbird</a>
<a href="http://www.youtube.com/Balerion300" title="Westeros.org on YouTube">roundedyoutube</a>
{if segment_1 == "Updates" OR segment_1 == "Digest"}
<a href="{path="{segment_1}/RSS20/"}" title="Westeros.org via RSS">roundedrss</a>
{if:else}
<a href="{path="Updates/RSS20/"}" title="Westeros.org via RSS">roundedrss</a>
{/if}
<a href="mailto:webmaster@westeros.org" title="Contact Westeros.org">roundedemail</a>
</div>

The output can be seen at http://www.westeros.org/ in the left sidebar.

2

Can you explain what the mixed results are and what issues you are having?

The icons seem to working on the iphone ok.

3

Windows Phone 8 seems to have issues with it. That’s the one I have been able to confirm, then I have some reports I am waiting for people to get back to me on what OS and browser they are using.

4

Windows 8 should support @font-face.

It may have nothing to do with the problem but why have you duplicated the ttf file at the end of the font-face rules?


@font-face {
font-family: 'Mono Social Icons Font';
src: url('http://www.westeros.org/Files/MonoSocialIconsFont-1.10.eot');
src: url('http://www.westeros.org/Files/MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
     url('http://www.westeros.org/Files/MonoSocialIconsFont-1.10.woff') format('woff'),
     url('http://www.westeros.org/Files/MonoSocialIconsFont-1.10.ttf') format('truetype'),
     url('http://www.westeros.org/Files/MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');
[B]src: url('http://www.westeros.org/Files/MonoSocialIconsFont-1.10.ttf') format('truetype');[/B]
font-weight: normal;
font-style: normal;
}

IIRC then mobile needs to use the svg font but you may be over-riding it with the duplicate ttf rule at the end (although I don’t think this is the issue).

@font-face is always a pain and I prefer to avoid it altogether where possible.

5

This was how the @font-face rule was setup on the page for the Mono Social Icons Font. It is the first time I am using @font-face, so I am not familiar with how to set up the rule myself.

How do you generally choose to approach social icons? Surely a font is better than images?

6

I don’t know about other social sites, but Facebook are quite clear that you should only use their officially-provided logos.

https://www.facebookbrand.com/dos-donts

7

Thanks, I will look into that further. That said, it seems incredibly common.

8

I agree - but lots of things are common which are not permitted. :wink:

9

True enough :slight_smile:

Ah well, it seems impossible to get @font-face (or maybe it is just with this particular icon font) to play nice across browser. Got a bunch of reports of it not working on IE 10 as well.

Stripping it out for now and going back to scratching my head over how to do this in a nice, clean way.

10

Icon fonts have sort of faded away as quickly as they appeared. The move seems to be towards svg, which has been around for ages but has only just started to take off.

11

How well-supported is svg? I haven’t looked into it at all, so I am not familiar with how it would be used or what the drawbacks would be.

12

It’s pretty well supported by everything now: http://caniuse.com/svg

It allows you to present “images”/shapes etc. as scalable vectors, which means that they are clean and crisp at any size, and they can also be very lightweight.

13

Thanks, will look into that. Of course, there’d still be the issue that TechnoBear pointed out, that most social platforms don’t allow you to make your own icons. I suppose it is possible they offer svg versions.

14

Just from a quick check, both Facebook and Twitter supply their logos in vector format (.ai or .eps) which you can open in Illustrator and save as SVG. So all good. :slight_smile: But anyhow, they just don’t want you to modify the look of the logo. I don’t think it matters what format it’s in. That wouldn’t make sense.