
Anybody else hating web fonts lately? - throwaway420
I adore great typography, but I think @font-face in practice contributes to some of the most annoying user experiences on the web today.<p>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.<p>I&#x27;m sure that more people will discover and adopt best practices to improve performance and overall user experience over time, but right now I&#x27;m noticing this slowdown very frequently. - see http:&#x2F;&#x2F;www.igvita.com&#x2F;2014&#x2F;01&#x2F;31&#x2F;optimizing-web-font-rendering-performance&#x2F; for some notes on best practices<p>To me, speed is still the most important feature of a website, and it&#x27;s shocking how bad this experience often becomes when web fonts are added to the equation.<p>This is one of the biggest problems I have with the current web because of how frequently I&#x27;m noticing this.
======
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](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.

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

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

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

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

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

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

~~~
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/](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/](http://instagram.com/p/ieluJhv-V7/)

How it looks to me:
[http://postimg.org/image/an1jbvf65/](http://postimg.org/image/an1jbvf65/)

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

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

------
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](http://www.fiftythree.com/pencil)

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

~~~
sTevo-In-VA
[http://www.lowing.org/fonts/](http://www.lowing.org/fonts/)

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

------
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](http://www.interfacesketch.com) [2] The
font I'm using [http://www.behance.net/gallery/ALEO-Free-Font-
Family/8018673](http://www.behance.net/gallery/ALEO-Free-Font-Family/8018673)

~~~
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...](https://developers.google.com/fonts/docs/getting_started#Optimizing_Requests)

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

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

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

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

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

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

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

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

------
nperez
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=336170)

[https://code.google.com/p/chromium/issues/detail?id=336879](https://code.google.com/p/chromium/issues/detail?id=336879)

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

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

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

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

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

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

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

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

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

------
guan
How well does Typekit implement those best practices?

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

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

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

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

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

------
hippich
try data-uri's

