Hacker News Reader

Comment by daviddaviddavid | Hacker News Reader

The explosion in use of web fonts is something I find a bit mystifying. There's nothing more jarring than watching the font of a web page change at load time. It's hard for me to imagine that the positives outweigh this one potential negative. It's like watching someone put their wig on in the morning.

I'm sure that there are tons of sites using webfonts in a way such that load time isn't visually compromised. However, I've seen the "font flip" at sites such as nytimes.com which I assume pay great attention to performance.

View on HN

I used to find it pretty confusing to. I mean, most of the shit I worked in I was quite happy with Arial or some monospace font.

Since then, I've worked with some truly excellent designers. They're people who are great at design, but know very little about the web, so they tend to bring some of the more 'traditional' design concepts with them.

I've seen that the difference in feeling/perception a font can convey for your message when used well is much more significant than I ever would have presumed.

Simply put, there is an aspect of your message that cannot be conveyed with fonts that are available across every device and operating system. (What... Arial, Verdana, Georgia and Times New Roman?).

I still don't necessarily grasp the difference between, say, "Proxima Nova" and "Montserrat" (Google Web Font), but at this point I'm a little more willing to trust the designer.

Using web fonts is one of the most annoying web design trends. My browser sometimes loads the wrong font for some reason, which for example leads to news rendered with a unreadable baroque typeface.

I would prefer to have them disabled completely, but didn't find an easy way to achieve this.

Since most fonts are loaded from Typekit and such, you can use something like Ghostery or Adblock to blacklist those domains (Ghostery actually blocks Typekit by default).

That's precisely why webkit chooses to instead not render any text depending on the font. I find that even more annoying, as I often get to see images first, then wait a lot more to see text.

Afaik only Firefox chooses to change fonts later.

That behavior is something that site owners can choose to enable with some asynchronous font loaders, not browser specific.

For example, TypeKit adds a .wf-loading class to the <html> element immediately, begins loading the font asynchronously so as not to block page rendering, and then removes that class once the font has loaded. So, if you're loading a TypeKit font for your H2 elements, you could use CSS like .wf-loading h2 { visibility: hidden; } to hide those headings until their font is available.

If you don't take advantage of the loading class, that's when you see a basic font at first and then see a visible change from the basic font to a web font.

Unfortunately, the only way to avoid either outcome is to load the font synchronously in the head of the page, which blocks the page from loading or rendering further until the font loads and is generally unacceptable for most sites.

Reply on news.ycombinator.com