WHAT'S NEW?
Loading...

I was annoyed by the web font issues at Upworthy...you won't believe what I did next!

Sorry about the title, I had to. ;)

I was running Windows and Google Chrome and I clicked on a link to an Upworthy.com video. When I go to Upworthy recently (don"t judge me) I"ve been seeing this weird font for the last few months. It"s obnoxious, and I was surprised they"d let this fly.

Upworthy has weird fonts

Later, though, I looked in another browser, and it looked fine.

Upworthy rendered in IE

Ok, time to F12. According to IE"s Developer Tools there are three webfonts coming down and they each are downloading completely.

IE dev tools say the WOFF file is fine

Interestingly Chrome says the same thing:

Chrome agrees

What"s the DOM expecting the font to be? Well, basically all of them. ;)

Seriously, though, IMHO pick a font or font family and move on. There"s really no need to make a list of 11 font types in the order you"d prefer them. Either your web font works or it"s Helvetica time.

Gill Sans? I don"t see a Gill Sans available here. Gill Sans is a Mac OS X system font, but it seems that Google Chrome on Windows REALLY don"t like being asked for it. ;)

I took each of the downloaded WOFF files and tried to open them at http://www.pkmurphy.com.au/glyphviewer/ to see if one was Gill Sans. Of course, none contained any of the first their fonts they"re asking for. Unless you explicitly download a web font, a list of fonts like these are a just a designer"s wish list.

Web Designers: Design for the web, not the cool fonts you have on your machine.

On 99% of Windows machines you"re going to end up with Segoe UI with this CSS font-family as most folks won"t have those first three fonts. It seems that Chrome gives up (?) after a few tries (not sure?) but if I remove Gill Sans as the first item it renders fine.

image

The font is correct with a smaller font-family

I tried to find a bug on this in the Chromium bug database...I"m not sure if it might be this one?

I hope a CSS person at Upworthy sees this and solves the mystery! What are your thoughts, Dear Reader?


Sponsor: And a big thanks to Raygun for sponsoring the feed this week! I love Raygun and use it on all my apps. Get notified of your software’s bugs as they happen! Raygun.io has error tracking solutions for every major programming language and platform - Start a free trial in under a minute!


SOURCE: http://www.hanselman.com/blog/IWasAnnoyedByTheWebFontIssuesAtUpworthyyouWontBelieveWhatIDidNext.aspx

0 comments:

Post a Comment