Comments on Webfonts on the Prairie

27 Reader Comments

Back to the Article
  1. Minor niggle:
    httparchive.org only surveys the Top 500,000 Alexa websites (http://httparchive.org/trends.php)
    You can get nice SVGs of the charts from http://mamasnewbag.org (when I get round to updating the database). ;-)

    Copy & paste the code below to embed this comment.
  2. @Richard Fink for some reason you’ve included the URL of one of my private sites (I’ve probably configured Apache incorrectly). http://www.mamasnewbag.org/
    This uses the data from httparchive.org but runs on a different backend and uses the more recent Google API for charts. Will be updating website reports to take advantage of the fact that now all the websites are measured as desktop and mobile websites: webfonts are an even bigger problem on mobile devices!

    Copy & paste the code below to embed this comment.
  3. @Richard Thanks for sharing your thoughts on this. I learned a lot from your article. Was wondering if you have any citations where I say ‘we should all just say no to webfonts’ or that I think ‘that sticking with tried-and-true system fonts is best for all concerned’? I couldn’t find where I say either of those statements in my talks or writing, but curious if I missed something.

    Copy & paste the code below to embed this comment.
  4. I enjoyed this article and it was a useful update on the state of web fonts.  That said, at times I thought the article was too insistent that popular == good, which is a line of argument I’m surprised to see in this space.

    That said, if popularity is an important metric for you, it’s worth acknowledging that the recent version of WordPress has removed web fonts from the admin area.

    Anyways, thanks again for the article .  Enjoyed it.

    Copy & paste the code below to embed this comment.
  5. I think i always had a problem with webfonts regarding their ugly rendering in windows based internet explorer machine. And i don’t see real improvement on that. Any thought on this ?  And a way to a handle it better ?

    Even recently, popular Google Font have real display issues in microsoft browsers (kerning / aliasing)...

    Am I alone with that ?

    Copy & paste the code below to embed this comment.
  6. After reading this, I can’t help but think of Apple’s decision to ditch the headphone jack in the new iPhone 7. People are complaining about it but it’s just technology moving forward. There are still problems with webfonts but the problems are diminishing every day. This is clearly the direction the web is headed in.

    Copy & paste the code below to embed this comment.
  7. I am curious if those who advocate abandoning webfonts have an opinion on image size and image compression, which generally have a much greater impact on page weight than fonts have.

    Copy & paste the code below to embed this comment.
  8. popular Google Font have real display issues in microsoft browsers (kerning / aliasing)...

    I would not use Google Fonts to judge webfont quality in general. Until very recently, their design and hinting standards have been quite low (as might be expected from a free product). Instead, have a look at foundries who put concerted effort into their screen fonts (like Font Bureau, Hoefler & Co., Frere-Jones, Commercial Type, and FontFont) to determine whether webfont performance on Windows can live up to the standard set by Microsoft’s Core Fonts for the Web. Most of these suppliers provide screenshots from a variety of browser/OS environments so you know what you’re getting, even if you’re designing on a Mac. In most cases, you get what you pay for.

    Copy & paste the code below to embed this comment.
  9. Just want to mention that Jeremiah Shoaf’s book “The Definitive Guide to Free Fonts” is worth every penny and more.

    Copy & paste the code below to embed this comment.
  10. @Richard not pissed off, just disappointed in your integrity as a writer. You are misleading people to believe I said things I didn’t. As a member of a community, this doesn’t seem like the way to foster discourse responsibly. I expected more professionalism and courtesy from someone like yourself.

    Copy & paste the code below to embed this comment.
  11. @Richard thanks for sharing ressources. That typewolf.com website seems to be a great place to learn :)

    Copy & paste the code below to embed this comment.
  12. I see another commenter heralding Hoefler as a proper quality typeface solution (usually true), but their web-delivery service is so disappointing—no performance-reliant site should ever use their delivery platform. They basically give you two options for implementation (and they really only recommend the first):

    A. Delay the rendering of CSSDOM until their engine points to the correct font (this is a call out to their server for logic, but the font is hosted on your server - which is a bit frustrating)

    B. Add your own JS and delay their delivery platform (so, a local script to delay an external script to point to a font stored on your webserver)

    Which ties you to:

    A. Get penalized by Google’s algorithms for render-blocking

    or

    B. Penalize your users with FOIT/FOUT (good luck ever using their condensed fonts with FOUT)

    With these considerations in mind, a large scale performance-dependent website (ecommerce in my experience) should not use a JS-based font delivery service. We’ve seen multiple large-scale retailers claim that any delay in rendering will impact bounce rate and sales (Amazon is known for claiming 100ms latency = 1% sales loss). At scale that can mean millions of dollars in sales lost to font rendering.

    You can’t rely on operating systems to supply a system font reliably, but in a similar vein can you rely on ISPs and third-parties to reliably fulfill external calls that block text rendering?

    If you’re relying on performance don’t even bother pulling that JS hammer out of the drawer. Storing font files on your server and delivering via @font-face is the only current solution that can deliver in terms of performance and user experience (which as the author pointed out above, is still lacking in its own right).

    Sorry about beating a dead-horse a bit, but I’m really frustrated about being unable to use Hoefler typeface on the web. So close, yet so far away.

     

    Copy & paste the code below to embed this comment.
  13. Great read on web fonts (Didn’t know of the huge story behind it).

    Copy & paste the code below to embed this comment.
  14. @richard

    Just because lots of sites use webfonts it doesn’t make them right (after all look at how many sites used Flash?)

    In my experience (I do site performance full time) fonts are the blocker to early rendering on many sites and given the choice between the font a site chose and seeing the content you can guess which I choose.

    More bandwidth doesn’t really solve the problem

    - they’re discovered late i.e. when the render tree is built by which time the browser has the text and is just waiting for the damn font to be able to render it

    - we’re increasingly using mobile devices which use higher latency / unreliable network connections so getting the font is slow if it happens at all

    The font display property will help make things more robust but it was proposed over a year ago and only one browser supports it…

    Copy & paste the code below to embed this comment.
  15. One point I think you have entirely backwards is the notion that webfonts are any help for extended unicode support. You have to ask, what is more likely? That a user will have their preferred language configured on their device with a font that works for them, or that any webfont you decide they ought to use will support their native language?
    Obviously the user will have a system font that supports their language. Chances are, the webfont you picked out before they visited the site, perhaps even before the characters they required were included in unicode will not support their language. System fonts are the clear winner for extended language support.

    Copy & paste the code below to embed this comment.
  16. Some concerns:
    1) Visitor may find your particular font choice, e.g., Garamond in my case, hard to read
    2) Visitor may not have an unlimited mobile plan, so you are making them pay for your vanity
    3) Supposedly page abandonment rates go up after even a couple of seconds

    Copy & paste the code below to embed this comment.
  17. Actually, I just encountered a site using Montserrat and had to zoom in 5 or 6 times before it was comfortable and cartoonishly large for me to read. I only have to zoom in once or twice to read A List Apart’s Times (something I like in print but not onscreen).

    Copy & paste the code below to embed this comment.
  18. Actually, Raleway, and I wound up inspecting the element and replacing with Arial. Yup, 275% zoom to read Raleway comfortably, 125%-150% zoom to read Arial comfortably.

    Please think about this when choosing your wonderful alternate font.

    Copy & paste the code below to embed this comment.
  19. I, mostly use system fonts. It’s good to see my site on iOS devices using apple’s system fonts :).

    Copy & paste the code below to embed this comment.
  20. Sorry, commenting is closed on this article.