Anybody else hating web fonts lately? | Hacker News Reader

Anybody else hating web fonts lately?

89 pointsthrowaway42072 comments

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.

View on HN

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

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.

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.

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.

in our industry we have a graph from .0000 seconds to 3 seconds and 3 seconds is in RED.

3 seconds is already way too long.

> 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/

This delay is not repeated, though.

3 seconds is an eternity when it comes to responsiveness. Better than nothing, sure, but we're a long way from an ideal scenario.

I'm under the impression, chrome doesn't download webfonts in any hidden tab.

Please experiment this!

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.

Why 3 seconds... who made that choice

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

How does this impact fonts used as icons? Solutions like icon moon and font awesome?

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.

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.

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?

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.

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

I agree with you on the JS front. Looking at you Yahoo mail -> and the user menu.

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

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

The choice of type conveys a lot about a brand, lets not forget that.

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.

You know what is even more annoying?

The web is a regression in the art of typography; not a single browser proposed to stop all this absurdity such as pixel based measures. Not a web page respect the rules of typography, not a single font is "nice", we have to drop accents.

Typography are sets of rules that are well codified, but the we put the burden of enforcing typography not on the computer, but on web designer (line spacing for instance).

Web is WYSIWIG, it should be What You See Is What You Mean, and computers that have so many CPU power should do their job of automation and take care of the part of the presentation that is both hard and that can be automated: typography.

The web is archaic. A web page is just a stupid port of the stupid "physcical page with boxes in which you put content". The abstraction of web page is a shame compared to all we could provide: automatic versioning, true separation of the content and the styling (yes I think of latex or wiki), something to make bibliography when quoting an URL automatic and complete (who, (c), legal conditions for reusing, scientific informations, related articles...).

The web concept is conservative yet progressing irreversibly towards a de facto standard that brings less advantages than a pure paper system (think of the cost of conservation of the content over time and the cost of maintaining server operational+permalink).

At one point, we will have to erase data from the web, and the knowledge will be lost.

What will have been the benefit of internet when you see you can still consult the first book printed by Gutenberg

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.

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.

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?

FF uses fallback. Chrome and other WebKit-based browsers, however, do not.

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

You could install the popular icon fonts (bootstrap and font awesome) locally, should work for Open Sans etc too.

Q: How do you that on a smart phone or tablet? A: You can't!

I'm sure it's possible on an Android device.

I'm fairly sure you can on Android. No idea about iOS.

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/

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?

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!

What's more annoying is that disabling HTTP referrers breaks virtually all hosted font services and results in absolute mess as nobody seems to care to test their designs with their actual fallback fonts.

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

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.

http://www.lowing.org/fonts/

I was just looking at this today and I agree, 'just give me courier'

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

Gone with the same solution myself. Significant benefits, plus it fixes the issue with poor rendering of Google Fonts in Chrome for Windows. Wrote a post about using Font Squirrel a few weeks back on my blog: http://www.jeffmould.com/2014/01/29/how-to-fix-google-fonts-...

Didn't Google fonts just add such a feature? (though it's still in beta)

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

So use standard fonts. What you have to say will be impaired by Ariel? Give me a break. I'm reminded of all the 'research' that went into early half-tone printing (silk-screen) - where ink flows through variable-sized holes punched in a sheet to make newspaper-like pictures. Folks argued about what shape of hole to use (really!) Because square holes would bleed and the ink would make rounder dots on the paper. One guy determined if you put little round holes at the corners of the square holes, the dots were squarer. Why? What possible difference did it make?

That's what I think about fonts. Don't get in the way of reading == win. After that, its squarer dots.

I detect mobile devices on the server and simply disable web fonts for them. You just don't need all that stuff on mobile.

You know what's worse? Just try to use the option in firefox to "Allow pages to use own fonts" because, you know, you would like to read all pages with the freaking same font and font size you define in the browser options, and then just go to some random page like github and see all the broken stuff around without any icons.

I'm sorry that I have to say this and people will feel hurt and use their reasons, but don't use fonts to put images / icons on websites. Those are IMAGES, use that, please. Fonts are for text. Stop the madness.

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.

Looks like different browsers behave differently. http://24ways.org/2010/using-the-webfont-loader-to-make-brow... (edited)

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

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.

Some of the potential reasons that this is more annoying than usual (for Chrome users) right now are these bugs:

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

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

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.

I notice it a lot on Digg.com on my iPad. The images show up sometimes 10+ seconds before the text! hurts my brain!

>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!

I always hated them! I spent endless hours making things load faster and the designers would always kill my effort by pushing Typekit. I think the average user cannot tell the difference anyway. I won't even mention how big our bills were at the last two large e-commerce properties we used Typekit!

+1 - this is dreadful on the iPhone. There is surely some kind of sane fallback that could be used while it loads

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.

Let's not kid ourselves. Web fonts are 80% about branding and 20% about usability - on a good day.

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?

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.

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.

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.

Don't use too many fonts and embed them in css. The waiting time is roughly the same but the experience is better because you see all the styling at once.

How well does Typekit implement those best practices?

You can try ad-blocking font urls. (I've done this in the past to get rid of a hideous heading font on some apache site.)

On mobile, it's the worst! I have to stare at a completely blank screen for several seconds while the fonts download.

Digg.com is horrible for this. I can't believe that I see the images before the text.

Do you have any examples of this? I haven't noticed this occurring.

Hmm. I've never noticed such. Does anyone have any good examples?

try data-uri's

Reply on news.ycombinator.com