Closed Bug 907371 Opened 6 years ago Closed 5 years ago

HuffingtonPost icon font not rendering for social/sharing buttons

Categories

(Web Compatibility :: Mobile, defect)

ARM
Android
defect
Not set

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: marco, Assigned: karlcow)

References

()

Details

(Whiteboard: [country-all] [sitewait] [css])

Attachments

(1 file)

To reproduce, just open the huffingtonpost website, open one of the news and scroll down until the social buttons appear at the bottom.
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"}
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.
Summary: HuffingtonPost social links are images in the stock browser, letters in Firefox → HuffingtonPost icon font not rendering for social/sharing buttons
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.
Whiteboard: [contactready]
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
Assignee: nobody → kdubost
Status: NEW → ASSIGNED
Whiteboard: [contactready] → [contactready] [country-all] [contactready] [css]
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.
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)"
Whiteboard: [contactready] [country-all] [contactready] [css] → [contactready] [country-all] [sitewait] [css]
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
Whiteboard: [contactready] [country-all] [sitewait] [css] → [country-all] [sitewait] [css]
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}
I had a very cool human contact at HuffingtonPost, following up with emails.
This is fixed.
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.