Scott Hanselman

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

August 16, '14 Comments [20] Posted in HTML5
Sponsored By

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. ;)

That's a long font-family

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!

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Sunday, August 17, 2014 12:01:56 AM UTC
9 Fonts to make your web site look trendy. You won't believe number 6!
Sunday, August 17, 2014 12:34:57 AM UTC
Actually "font-weight" property is important in this case too. You didn't show it, but it's set to "font-weight: 400;". It seems in this specific combination browser tries to match first available "400" version font-family. If first one (Gill Sans) is not introduced with "400", the browser would try to find next one until it finds first good match which can be wierd one :) So to solve it just try to cross-match all font-family vs. font-weight combinations. I end up with Segoe UI on Windows anyway :)
Eric
Monday, August 18, 2014 12:18:43 AM UTC
You are killing me with the title of this post! :) Can't wait for this trend to die!!
dean
Monday, August 18, 2014 6:58:08 AM UTC
I've seen this across multiple browsers here.

In the end, browsers prefer the first font listed.

And I had installed Gill Sans, with the only variant being wide-extra-bold. Removing that font removed the problem. I have no idea where that Gill Sans variant came from, presumably some application (or maybe printer driver).

The root cause here is assuming installed fonts always come in the same set of variations.

("Gill Sans MT" and "Gill Sans Std" don't match "Gill Sans", so they're still in place.)
Tuesday, August 19, 2014 2:25:32 PM UTC
Please post the page views of this post compared to others, just to see if these kind of titles work as expected ;)
Friday, August 22, 2014 5:06:42 PM UTC
Awesome title. :) Very baity.
Monday, August 25, 2014 6:58:15 PM UTC
Now you need to get Downworthy for Chrome.
Micah
Thursday, August 28, 2014 3:08:06 PM UTC
Hi Scott,

Found your article while researching this same rendering problem in our application.

There is apparently a "Gill Sans Ultra Bold" problem out there on the Web. It comes back to some pretty complex stuff regarding how fonts are managed by Windows!

Mozilla found this and implemented a workaround to prevent FireFox from subsituting the heinous "Gill Sans Ultra Bold" for the very nice "Gill Sans" or "Gill Sans MT". Much more detail here: https://bugzilla.mozilla.org/show_bug.cgi?id=551313

In my opinion, css font strings are a good thing. If the font isn't there, it should move on to the next. In this case, the problem is that browsers are grabbing the wrong Gill Sans and not moving on to the next preferred font.
Pete
Thursday, August 28, 2014 3:17:28 PM UTC
Also if others are coming to this site (due to scott's massive search engine affinity) due to the Gill Sans Ultra problem, please vote for a bug fix in Chrome here:

https://code.google.com/p/chromium/issues/detail?id=408093

Click the star icon!
Pete
Thursday, October 16, 2014 6:38:15 AM UTC
 「AKB48はおかしい」「あれだけお金をつぎ込んで宣伝すれば人気が出て当然」
「女優wお前みたいな不細工が女優ww」とか思っちゃうんでしょ?
「映画の芸術性(笑)の為に必要だから」とか口説かれて、アッサリ30前辺りに脱いじゃうタイプ

Do this repeatedly until you've got a sense of the musical
potential of your respective statement. You should know and determine demographics of one's targeted customers as an example;
the age groups, educational achievement, gender, career, needs, and hobbies.
オンライン
This is incredibly similar to strategy 1, so this
can be a most common kind of Linked - In profile you may see around the site.
You will must create your there and post some really good content to be able to
share the advertising revenue.
Friday, October 17, 2014 6:41:51 AM UTC
菊地はあのウザキャラと強メンタルで、ピンでやってくのに成功したね
ビッグビジネスになったAKBにとっては芝も窪田も邪魔なだけだからな
     |Ξ|~ \             / ~|Ξ|

Journalist who, at their first days spend their time
writing just death notices, continue to be think obituary
writing may be the most rigorous training a new reporter might have.

Unfortunately, some students continue to fail it doesn't matter how hard they attempt to write their own academic assignments.
しもそく 桃猿 スマホ Drama want
to decide the fate in the materials inside the hands of readers.
The upper hutch is no more standard on most desks either,
and also the need for desk drawers is less now with the advent of the filing cabinet.
Friday, October 17, 2014 7:25:42 AM UTC
best buy

s care about itself and away from your topic; the method of writing must be transparent on the reader.

A seasoned and professional writer is an assigned to get investigating extensively about the subject at
hand. highest (jazztimes.com) is there a rca to hdmi
cable Knowing these first before you're writing a chapter work with you in writing a
focused, well-organized, compelling book that speaks
directly to your potential buyer. Many people are lazy to create their term papers
as a consequence of lack appealing.
Saturday, October 18, 2014 12:17:12 PM UTC
アイドルは若い頃(それこそ10代から)に売れなきゃ意味ねえんだよ!
自分を責めてはいけません。頑張ったらますます悪化します。
顔面レベルだけでいったらAKBより乃木坂のほうがいいのかもしれないけど

The effort you put into become an authority quality SEO writer pays off very well for you in the end.
, a strategic literary development company which helps
authors, directors, executives, and publishers to generate writing content of substantial
quality and provide it to market. 問題 Jason: Blake says horrible stuff
that make me feel so angry and hurt. 4) Accept the possibility that you simply might be writing or have written the wrong book.
Sunday, October 19, 2014 4:42:59 PM UTC
The other item that I found while reviewing the product or service,
that this program didn't offer is really a per user control of blocked web-site categories.
Learning about these reasons can allow you to determine if CCTV is right in your case and your house.
Cctv dvr hd This may be the primary reason most stores and
also homes have decided to put in their own DVR or CCTV.


Employees under constant surveillance by CCTV cameras often oppose such
monitoring with their daily behavior. In another case, just one
male might discover having a DVR enabling him to become couch
potato.

It is more effective to state which countries in particular you mean. Enjoy, sit back, revealed,
try this clustering method, discover how to relax that muscle involving the ears,
and to know, 1 day, all sudden, you merely might end up writing.
amount (democrats.assembly.ca.gov) cctv dvr hard drive failure Make it clear that
you simply are satisfied with all the ingredients on the whole, however you'd like an opinion about seasoning.
By understanding this, you'll be in a position to get
intriguing write-ups which will be appealing to any or all visitors, in particular those
up-to-date nerds.
Wednesday, October 22, 2014 3:13:56 PM UTC
As well as using spy cameras there a substantial number of items that can help when protecting your home.
In addition, you need to also discover the disadvantages
utilizing these camera types.

Learn more to do with cool spy gadgets for youngsters with the following Bright Hub articles.
Another problem with wireless cameras is that they can sometime pick up interference using their
company wireless devices. Spy camera sunglasses set time While you could possibly expect that there would have been a program to aid in detecting i - Phone spyware, that is just not quite the case.


Write a number of short paragraphs or bullet points on the
overall approach to the project. Rhythm may be considered by
50 % main ways means of visuals intended to create and manner of matching pace of copy to feelings.
Spy camera qatar All - Http://Cameraerufus.Artician.Com - Our trusted mantra �gQuality
over Price�h has led us in achieving many clientele from all parts in the Globe.

What you end up with communication is which you can be generous attitudes.
Friday, October 24, 2014 3:53:55 AM UTC
Electric razors that have different intensity changes operate
ideal for different kinds of epidermis. Learn and hear what these experts say concerning
the product and beyond this concept base whether you still wish to continue getting the electric razor you aren't.
Electric razor how often replace blades On common the from the differences is always that on the how and various
planning to be the shaver will reduce the hair and precisely what is your
face feels after every shave.

Other earlier mechanical razors that weren't electric was required to employ more crude mechanisms like chord fly-wheels, or perhaps a crank-wind
system for their mechanical energy. And, whenever
we buy different electrical parts on our own, then it can also
save the amount of money and time as well.

Your e - Book is geared towards solving a particular problem of your respective
target market, whereas a traditional book might be about anything.
In such a close situation, it is the GMAT essay scores that come to your rescue.

Electric razor phone app forty [http://electricrazor.nachod.org/] The
set of used sources is usually presented inside the bibliography section, so that the clients could perform additional research
if needed. They want to prevent disease and remain as healthy as is possible.
Friday, October 24, 2014 4:42:13 AM UTC
The LED lights usually do not require any kind of maintenance plus it has a
durability too. These light also manage to either be set
up about the ceiling facing directly down on your
own plants and they are able to even be setup on the wall,
so that your plants get light horizontally. Led grow lights black dog Lights of colors are placed down the edges, either end and across the
center line with the runway in order to keep planes on course for landing and takeoff.


Because you'll find certain things to consider when you happen to be starting to work with LED lights, it is vital to have the
exact information via a dependable LED grow lights review.
Other mild behavioral disorders in children could possibly be made
worse by working at school under fluorescent lighting.


This impartiality or perceived impartiality, is surely an element of academic writing.

In right-brain painting classes the teacher gets
you to let go in the image of what you think the thing is, to seeing only what's there and consequently drawing it.
namely led grow lights uk review 2014 Many are fond of writing and also the main aim of elementary writing prompts is always to provide suggestions for that kids
to write down on topics that can interest them.
Take an alternative angle: Your travel writing doesn�ft have to include merely a description with
the place.
Friday, October 24, 2014 8:57:21 AM UTC
Your university will have your personal computer lab where it is possible to work on your
papers or assignments; there's no question about that.
Cooling pad is certainly one more option in your case, but using cooling pad
can cause you to little uncomfortable in handling, as in places you carry your laptop you also need to carry cooling pad too.
Best laptops for online college This, along with television, cable, cellular phones in addition to their plans, i -
Pods and other gadgets absorb a significant amount of your college student's
disposable income.

The avalanche of printed and digital reading material that's overwhelming university students will only grow as demands
on students increase in addition to their free time decreases.
If you need to get a whole new replacement HP hstnn-lb72
laptop battery, book Hoo - Too.

It is best which you make the best decision starting with
reading novels within the specific genre you're interested in. Youcan now start doing
smaller tasks that will contribute on the completion of one's essays.
Laptops for college recommendations face (http://www.gokokan.com/groups/the-importance-of-best-laptops-for-college-students-consumer-reports) Writing concisely
allows that you explain your topic clearly with more impact.
Now that individuals have the scope points fixed we can easily now allow for changes to occur, with regards to
points.
Friday, October 24, 2014 9:50:21 AM UTC
Another strategy is to require a tall white calla lily
sufficient reason for it either take two different colors of
calla lilies or same color calla lilies. An substitute for
storage would be to grow calla lilies in pots to ensure the plant could be
brought indoors through the winter. Food is extremely
good at weddings, but you undoubtedly will not have access
to time to nibble on it.

Pets are susceptible to even small amounts of alcohol due to their size along with the fact that they metabolize substances differently in the way humans do.
There is definitely an intrusion upon Woodman's
body and also the melons which have their innards got out and
dripping to ensure that they seem more obscene.


I think here is the best method to work from home and earn money online very easily.

Being professional or well versed in writing will not mean which
you are gonna sell work (though it may be hugely
rewarding both emotionally and financially). theirs, nasa.gov, calla lily bouquet for wedding For example, if you were writing about 'affiliate marketing for dummies' (as I did in my above example), linking to Wealthy Affiliate is really a very targeted page.
If you edit while you go along (which a lots of people do) your article will be very messy with lots of corrections and can be difficult to
follow along with.
Friday, October 24, 2014 8:19:07 PM UTC
Genuine knowledge! That’s not a common searching material and best for measuring a goal.

amazon N7 Jacket
Lisa Thomas
Name
E-mail (will show your gravatar icon)
Home page
 
Comment (Some html is allowed: a@href@title, b, blockquote@cite, em, i, li, ol, pre, strike, strong, sub, super, u, ul) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.
Live Comment Preview

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.