HN Explorer

Anybody else hating web fonts lately?

89 points by throwaway420 ↗ HN
I adore great typography, but I think @font-face in practice contributes to some of the most annoying user experiences on the web today.

It is very frustrating when loading up a website and seeing a mostly blank page because the fonts are still downloading. This is especially frustrating on a slow internet connection or on mobile.

I'm sure that more people will discover and adopt best practices to improve performance and overall user experience over time, but right now I'm noticing this slowdown very frequently. - see http://www.igvita.com/2014/01/31/optimizing-web-font-rendering-performance/ for some notes on best practices

To me, speed is still the most important feature of a website, and it's shocking how bad this experience often becomes when web fonts are added to the equation.

This is one of the biggest problems I have with the current web because of how frequently I'm noticing this.

74 comments

[ 3.2 ms ] story [ 133 ms ] thread
ryanackley
Haven't noticed this recently but I did when I had a slower internet connection. But yeah, I was still on broadband when I was noticing the blank page problem.
kirbyk
Hmm. I've never noticed such. Does anyone have any good examples?
sdkmvx
In Firefox they can be disabled via the gfx.downloadable_fonts.enabled about:config switch. Unfortunately that will really highlight the accessibility nightmare that icon fonts are, as they don't display and have no alt-text like images.

I've also noticed that disabling JavaScript has a huge effect on some websites' speed. But other sites don't even work without it nowadays.

weland
This is precisely what I do on my laptop. I regularly have to access the web over rather poor connections like public hotspots or not-quite-so-glorious Internet connections, and web fonts make this quite messy.

I really like typography (calligraphy has been one of my favourite pastimes for many years) but I think its implementation on the Internet is very bad from a usability perspective.

wwweston
As of last summer, my experience was that Firefox (and IE) would render text in a fallback/default font if waiting for another font to download. Has this changed?
elehack
FF uses fallback. Chrome and other WebKit-based browsers, however, do not.
jarofgreen
Anyone know a good reason why not? This seems like a great answer to the issue.

(I suppose you may get web page layouts "jumping" if the downloaded font had very different spacing to the fallback font. EDIT: Ah, just learnt this is called FOUT. http://www.paulirish.com/2009/fighting-the-font-face-fout/ Still, I'd personally prefer FOUT to being unable to read the page.)

ZeroGravitas
You could install the popular icon fonts (bootstrap and font awesome) locally, should work for Open Sans etc too.
bhaak
Q: How do you that on a smart phone or tablet? A: You can't!
dublinben
I'm sure it's possible on an Android device.
andybak
I'm fairly sure you can on Android. No idea about iOS.
nettletea
Regarding icon fonts:

I override all web fonts, I just want to use a readable one. There's a noticable trend with embedding icons in fonts. Yahoo mail uses them. This doesn't feel quite right, even if it is a neat hack, and it can be annoying.

How I view Yahoo mail: http://postimg.org/image/unnwg0d9p/

sosborn
What's interesting to me is that even in that state, it is not difficult to understand what the menu item does, so why even bother with the icons?
nettletea
Mail selection with Yahoo is tricky, but it's mostly usable. The current iteration is way better than it has been. (They've fixed back button integration. )

Google use a lot of buttons without text, using icons instead, which a lot of the time are background images. This lends to a lot of mystery meat navigation. Google+ is a bit of nightmare on that front for me.

I don't think my setup is that exotic, all I'm doing is trying to use consistent background and foreground colours, font and text size.

It's amazing how many sites seem to gloss over accessibility.

An instagram page: http://instagram.com/p/ieluJhv-V7/

How it looks to me: http://postimg.org/image/an1jbvf65/

Yup, pretty useless. I've never been able to use/see Instagram pictures without flipping between browsers!

igvadaimon
I detect mobile devices on the server and simply disable web fonts for them. You just don't need all that stuff on mobile.
deluvas
>It is very frustrating when loading up a website and seeing a mostly blank page because the fonts are still downloading.

Yes, annoying, can confirm. So I load the page, and all I see are text decorations like underlines, but no text. I have to wait like 1.5-3 seconds, depending on the connection. I mean, seriously, come on!

donatj
I notice it a lot on Digg.com on my iPad. The images show up sometimes 10+ seconds before the text! hurts my brain!
peteretep
+1 - this is dreadful on the iPhone. There is surely some kind of sane fallback that could be used while it loads
guan
How well does Typekit implement those best practices?
pcurve
I haven't noticed it too much, but I agree a few design trends today have horrendous impact on UX.

My personal beef is anything that causes jerky or laggy scrolling. Usually it's caused by parallax and/or fixed fancy header of some sort.

The only parallax effect that I found truly functional was this page: http://www.fiftythree.com/pencil

null_ptr
A page being blank while the fonts are downloading is a browser bug. The user's default font should be displayed in the meanwhile, just like (I hope) it would be if the font link was broken.
pritambaral
That was initially the case, but it led to such a bad UX, that it had to be scrapped. Look for FOUT on the web.
chebum
To me the biggest problem is very complex websites that start downloading content after the page loads. For example, Facebook. Page loads, get displayed and only then it starts loading content, ads, navigation, etc. The second problem is super-slow scrolling. Only my new i7 laptop with 16gb of RAM can open Facebook smoothly.
halisaurus
The instance that irks me the most is Fast Company, more specifically m.fastcompany.com. The subtitle that's highlighted in yellow loads the BG color before the font is loaded and line-height is calculated, so on mobile there's an empty yellow block that then separates and then gets filled with text. For a site/magazine focused on design it's one of the uglier things I see on a regular basis.
wyuenho
Is there a reason that the font fallbacks you've defined in your CSS don't get used by browsers while the prioritized fonts are being loaded? This will take care of the blank page problem wouldn't it? Are there any JS solutions out there for this?
erichurkman
That's how they used to work. However, it was just as jarring as the OP's complaint: the flash of unstyled content. You'd start reading something while the fonts downloaded. Suddenly, the whole page would jump and change as the new font (with its metrics, kerning, etc) are applied.

IIRC, Firefox waits a few seconds showing no text. If the font still isn't available, it resorts to fallback fonts and redraws the page if/once the font is actually downloaded.

tomkin
You know what's annoying? Having to wait for JavaScript to download before I can click on a menu.

You know what's annoying? Having to wait.

Waiting is annoying. But at the end of the day, a web without typography freedom is not a web I want, or would value. Especially since I remember what people did when they couldn't have web typography: save it as a one-time use only image.

Sorry, you were saying something about speed?

stan_rogers
30 seconds followed by nothing at all is not an uncommon experience. For a freakin' blog entry. (As often as not I have to read using View->Source.) If you figure load times rivalling, say, launching Photoshop and frequent failed loads is reasonable for a text page, then maybe the web isn't where you want to be after all.
notatoad
>30 seconds followed by nothing at all is not an uncommon experience

really? because i spend a lot of time on the web and i've never seen that. You might want to check for problems at your end.

nettletea
I agree with you on the JS front. Looking at you Yahoo mail -> and the user menu.
subsection1h
> a web without typography freedom is not a web I want, or would value.

You wouldn't value a web without typographic freedom? That sounds pretty extreme. Are you a designer for whom the web is canvas, rather than a non-designer for whom the web is primarily a source of information?

I've been using the web for twenty years, and typographic freedom is fairly low on my list of priorities. But I'm not a designer.

[deleted]
(comment deleted)
tomkin
I think in hast, my wording wasn't as specific as it should have been. My point is: I don't value the opinion that it is not important. Not when you see what happens without it. It's pure fallacy to suggest that web fonts are the problem - when the pressure should be on finding a creative way to resolve the issue (i.e. just display the next available in the font-family list until downloading is complete, or read-ahead meta data that includes kerning, width, height and size, so the layout can modulate well).
nness
The choice of type conveys a lot about a brand, lets not forget that.
mrspeaker
Especially noticeable when a site uses it as their main content font, rather than just titles. Countless times I've closed a tab before the font renders (hey, there's too much stuff to look at, not enough time waiting for web fonts to load!).
interfacesketch
I have a website[1] that uses web fonts[2]. I have found that if you host the fonts yourself and compress the font files using Font Squirrel's web font generator service, you can get fairly small font sizes. I'm using two font weights (regular and bold) and the total comes to 104kb. Admittedly, that's quite large for a mobile website, but I think it's acceptable for a desktop site.

I've found the font files served by Google fonts are quite large and this is probably because their fonts contain the entire character set. Font Squirrel strips out characters it thinks are not needed.

[1] http://www.interfacesketch.com [2] The font I'm using http://www.behance.net/gallery/ALEO-Free-Font-Family/8018673

aruggirello
Didn't Google fonts just add such a feature? (though it's still in beta)
kderbe
That's incorrect. Google fonts subsets the font (default is latin). You can also limit the font to just the characters you want by appending &text=ABCDEF... to the URL. [1] They use other tricks to shrink the size of the font: WOFF2 is served to compatible browsers for further compression, and they remove unused hinting when they serve fonts to an OS X client. [2] Their caching and CDN are good too.

There are reasons not to use Google Fonts, but download size is not on that list.

[1] https://developers.google.com/fonts/docs/getting_started#Opt...

[2] https://www.youtube.com/watch?v=sqesm0euf9M

joemaller1
The problem is font-loaders. All of them. At best, you've got an additional http request, at worst a javascript file loads, executes, authenticates and then generates yet another CSS file.

The solution is to make everything as legal as you can, then quietly embed the font files directly into your CSS as data:font urls.

paulirish
> It is very frustrating when loading up a website and seeing a mostly blank page because the fonts are still downloading.

Soon to be fixed! Blink (Chrome, Chrome on Android, Android 4.4+ WebView, Opera) will be implementing new behavior for how webfonts are loaded: http://crbug.com/235303#c17 Basically, you'll only see invisible text for a maximum of 3 seconds (this is the same as Firefox). As Ilya's post also points out, we have strong data on webfont latencies in the wild that supports this behavior.

Further, we're shipping it with Font Load Events so you can customize loading behavior very easily. On the Safari side of things, I've seen WebKit add a radar tracking ticket for font loading behavior, so it seems likely Safari will be updating their style soon as well.

revelation
Showing nothing for 3 seconds beats just using the fallback and switching when the download finishes?

It's great you collected data, but I think the working hypothesis is flawed.

Kequc
I would rather not have the fallback font as the font changing suddenly is jarring. It also can muck up spacing to quite a high degree. If for example you were at an anchor quite a distance down the page and then the entire page shifts.

I added a Feedback drawer to the top of my site. Javascript would determine the height of the drawer then set the top position equal to the inverse of it's height. That way the drawer was completely hidden.

However when a font was loaded the height of the drawer changes and then you've got it sticking down over of the top of the page.

These kinds of things are really frustrating. I'd like to see the page not display until the fonts are loaded and I'd like to see Chrome start shipping with some of the more common web fonts included.

pkartistry
In some instances, showing nothing for a few seconds can be preferable. Some fonts are very different in size and that web font could flow a lot differently than what the fallback is. If you start reading and the font changes halfway through the sentence, it can be very jarring and slow you down as you try to find your place again.

A lot of the problem is poorly implemented web fonts that are not optimized, or web designers going crazy and including 6-8 different font/weight combinations. Having half a meg of web fonts download is no different than using way too many images that are not compressed enough.

BorisMelnik
in our industry we have a graph from .0000 seconds to 3 seconds and 3 seconds is in RED.
acqq
3 seconds is already way too long.
subsection1h
> you'll only see invisible text for a maximum of 3 seconds

"Even a few seconds' delay is enough to create an unpleasant user experience. Users are no longer in control, and they're consciously annoyed by having to wait for the computer. Thus, with repeated short delays, users will give up unless they're extremely committed to completing the task. The result? You can easily lose half your sales (to those less-committed customers) simply because your site is a few seconds too slow for each page."[1]

[1] http://www.nngroup.com/articles/website-response-times/

chc
This delay is not repeated, though.
cliveowen
3 seconds is an eternity when it comes to responsiveness. Better than nothing, sure, but we're a long way from an ideal scenario.
rmetzler
I'm under the impression, chrome doesn't download webfonts in any hidden tab.

Please experiment this!

rmetzler
Also please test if Chrome saves fonts in the cache. (And also test for non-active tabs!)

You might have lost commits, when the chrome team introduced the Tab-Music-Indicator.

yeukhon
Why 3 seconds... who made that choice
igrigorik
We instrumented Chrome and measured the download times: approximately ~1.1% of font loads are longer than 3s. New timeout will help address that 1.1% by using a system fallback.

http://www.igvita.com/2014/01/31/optimizing-web-font-renderi...

taf2
How does this impact fonts used as icons? Solutions like icon moon and font awesome?
igrigorik
As far as the browser is concerned, there is no distinction between icon fonts or any other fonts. If your icon font fails to load within 3s then it'll go ahead and try to paint the page with a fallback -- the results of that will vary based on how your icon font is setup / what glyphs it maps to.

If you want to define own load behavior: use the upcoming Font Load Events API.

twotwotwo
I see weirder Web-font-related behaviors on both Android and Ubuntu. Specifically, either 1) spacing is very wrong, maybe as if the text was laid out with metrics from the Web font but actually rendered with glyphs from a fallback font (ex: http://imgur.com/KovolXb, from https://news.ycombinator.com/item?id=6954882 -- the page should be in a webfont (Computer Modern Roman), but it's in some generic sans with bad layout), 2) very rarely, I see text that should appear in a Web font replaced with total gibberish (random characters overlapping each other, weird spaces) until I select text or do something else forcing a repaint. I last remember the latter effect in the title text of Slate articles (viewed on Android) that shows in a position:fixed bar after one scrolls down; think I've also seen it in titles on The Verge (viewed on Ubuntu). In both cases, the title text is in a different font from most of the rest of the page.

I'm glad there's performance progress, nothing but high praise for Chrome overall. Just weird things to see.

bluthru
Digg.com is horrible for this. I can't believe that I see the images before the text.
DanBC
Speed is a very important feature of a website.

Content is next.

Way way down the list is presentation. Give me ascii text in Courier? That's fine. I'll read that while all the other guff loads in the background.

aniketpant
Hating is good. It allows you to think of improvements. But, hating without any solution is highly annoying.

I understand the fact that you prefer speed but just speed is not the only solution to effective web design. Typefaces play a very important role in the overall UX of any site.

trollian
Let's not kid ourselves. Web fonts are 80% about branding and 20% about usability - on a good day.
100k
On mobile, it's the worst! I have to stare at a completely blank screen for several seconds while the fonts download.
[dead] dhfjgkrgjg
it is funny, all those sites that talk about user centric design, and the user experience, then go on to release a dogshit site that pulls in gigabytes of crap from the four corners, for what is basically a blog. Or a cms.

The web tards would be the first up against my wall.