907371 - HuffingtonPost icon font not rendering for social/sharing buttons

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Marco Castelluccio [:marco]]

To reproduce, just open the huffingtonpost website, open one of the news and scroll down until the social buttons appear at the bottom.

Comment 1

[Mike Taylor [:miketaylr]]

Attachment: Screenshot

Comment 2

[Mike Taylor [:miketaylr]]

They're using a custom icon font, "hpmobileweb" (from css.php):

@font-face{font-family:"hpmobileweb";src:url("/images/mobileweb/hpmobileweb.eot");src:url("/images/mobileweb/hpmobileweb.eot?#iefix") format("embedded-opentype"),url("/images/mobileweb/hpmobileweb.svg#hpmobileweb") format("svg");font-weight:normal;font-style:normal}[data-icon]:before{font-family:"hpmobileweb";content:attr(data-icon);speak:none;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased}
.icon-facebook,.icon-twitter,.icon-google-plus,.icon-comment,.icon-list,.icon-email,.icon-mobile,.icon-close,.icon-linkedin,.icon-feed,.icon-tumblr,.icon-blogger,.icon-arrow-left,.icon-arrow-right,.icon-checkmark,.icon-spinner,.icon-spinner-2,.icon-spinner-3,.icon-home,.icon-cog,.icon-search,.icon-video,.icon-slideshow{font-family:"hpmobileweb";speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased}
.icon-facebook:before{content:"\66"}
.icon-twitter:before{content:"\74"}
.icon-google-plus:before{content:"\67"}
.icon-comment:before{content:"\63"}
.icon-list:before{content:"\6d"}
.icon-email:before{content:"\65"}
.icon-mobile:before{content:"\e002"}
.icon-close:before{content:"\78"}
.icon-linkedin:before{content:"\69"}
.icon-feed:before{content:"\72"}
.icon-tumblr:before{content:"\e00c"}
.icon-blogger:before{content:"\62"}
.icon-arrow-left:before{content:"\3c"}
.icon-arrow-right:before{content:"\3e"}
.icon-checkmark:before{content:"\64"}
.icon-spinner:before{content:"\e00f"}
.icon-spinner-2:before{content:"\e011"}
.icon-spinner-3:before{content:"\6c"}
.icon-home:before{content:"\68"}
.icon-cog:before{content:"\75"}
.icon-search:before{content:"\71"}
.icon-video:before{content:"\76"}
.icon-slideshow:before{content:"\73"}

Comment 3

[Mike Taylor [:miketaylr]]

And the offending error: 

[14:20:16.223] downloadable font: no supported format found (font-family: "hpmobileweb" style:normal weight:normal stretch:normal src index:2)
source: (end of source list) @ http://s.huffpost.com/assets/css.php?f=mobileweb%2Fdev%2Fnormalize.css%2Cmobileweb%2Fdev%2Fapp.css%2Cbasic.css%2Cbuttons.css%2Cmobileweb%2Fnews%2Fauth.css&v=1379015248

Note, to see the social bar you need to scroll down a bit and then it appears at the bottom of the viewport.

Comment 4

[Mike Taylor [:miketaylr]]

They're only serving EOT and SVG font formats, and Firefox doesn't support either of those:

@font-face{font-family:"hpmobileweb";src:url("/images/mobileweb/hpmobileweb.eot");src:url("/images/mobileweb/hpmobileweb.eot?#iefix") format("embedded-opentype"),url("/images/mobileweb/hpmobileweb.svg#hpmobileweb") format("svg");

I believe the fix here is to contact HuffPo and ask them to serve a WOFF version of their icon font for Firefox users.

Comment 5

[Karl Dubost💡 :karlcow]

As I was looking for context before contacting Huffington Post

Bug 119490 - Implement SVG fonts - Closed as WONTFIX
    http://caniuse.com/#feat=svg-fonts

and EOT is Microsoft only
    http://caniuse.com/#feat=eot

Comment 6

[Karl Dubost💡 :karlcow]

Posted the following message on their http://www.huffingtonpost.ca/contact/#tech

Hi,

I'm working for Mozilla.
Part of the Web compatibility team.

When accessing the Web site with Firefox on Mobile (Firefox OS or Firefox Android), the social media icons are not visible when scrolling to the bottom. 

Huffington post provides fonts for the icons in SVG and EOT formats. A possible fix is to provide the fonts as WOFF. The benefit for HuffingtonPost is that it will be supported everywhere.
http://caniuse.com/#feat=woff
It makes your CSS rules simpler and you don't need to cater for SVG and EOT anymore.

The details of the bugs are at https://bugzilla.mozilla.org/show_bug.cgi?id=907371

Thanks.

Comment 7

[Karl Dubost💡 :karlcow]

The issue is still the same. with letters instead of the icons at the bottom. Currently I have "2, e, t, c".
Sent a reminder. The id for the report is 
   "Re: SVG font in Firefox, provide WOFF (request #170438)"

Comment 8

[Karl Dubost💡 :karlcow]

Sent another reminder, but that seems to be useless. The user support service seems mostly dead.
Let's try with a human :)
http://twitter.com/MozWebCompat/status/456264242602070017

Comment 9

[Karl Dubost💡 :karlcow]

For readability, the part in css.php

@font-face{
    font-family:"hpmobileweb";
    src:url("/images/mobileweb/hpmobileweb.eot");
    src:url("/images/mobileweb/hpmobileweb.eot?#iefix") format("embedded-opentype"),url("/images/mobileweb/hpmobileweb.svg#hpmobileweb") format("svg");
    font-weight:normal;
    font-style:normal}

[data-icon]:before{
    font-family:"hpmobileweb";
    content:attr(data-icon);
    speak:none;
    font-weight:normal;
    font-variant:normal;
    text-transform:none;
    line-height:1;
    -webkit-font-smoothing:antialiased}

.icon-facebook,.icon-twitter,.icon-google-plus,.icon-comment,.icon-list,.icon-email,.icon-fan,.icon-mobile,.icon-close,.icon-linkedin,.icon-feed,.icon-tumblr,.icon-blogger,.icon-arrow-left,.icon-arrow-right,.icon-checkmark,.icon-spinner,.icon-spinner-2,.icon-spinner-3,.icon-home,.icon-cog,.icon-search,.icon-video,.icon-slideshow{
    font-family:"hpmobileweb";
    speak:none;
    font-style:normal;
    font-weight:normal;
    font-variant:normal;
    text-transform:none;
    line-height:1;
    -webkit-font-smoothing:antialiased}

Comment 10

[Karl Dubost💡 :karlcow]

I had a very cool human contact at HuffingtonPost, following up with emails.

Comment 11

[Karl Dubost💡 :karlcow]

This is fixed.