7 ms·

Anybody else hating web fonts lately?

• igvadaimon 13y ago
  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 13y ago
  >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!
• sp332 13y ago
  Looks like different browsers behave differently. http://24ways.org/2010/using-the-webfont-loader-to-make-browsers-behave-the-same/ http://24ways.org/2010/using-the-webfont-loader-to-make-brow... (edited)
• ryanackley 13y ago
  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 13y ago
  Hmm. I've never noticed such. Does anyone have any good examples?
• sdkmvx 13y ago
  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 13y ago
    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 13y ago
    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 13y ago
      FF uses fallback. Chrome and other WebKit-based browsers, however, do not.
      • jarofgreen 13y ago
        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/ http://www.paulirish.com/2009/fighting-the-font-face-fout/ Still, I'd personally prefer FOUT to being unable to read the page.)
  • ZeroGravitas 13y ago
    You could install the popular icon fonts (bootstrap and font awesome) locally, should work for Open Sans etc too.
• donatj 13y ago
  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 13y ago
  +1 - this is dreadful on the iPhone. There is surely some kind of sane fallback that could be used while it loads
• guan 13y ago
  How well does Typekit implement those best practices?
• pcurve 13y ago
  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
• nperez 13y ago
  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
• null_ptr 13y ago
  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 13y ago
    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 13y ago
  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 13y ago
  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 13y ago
  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 13y ago
    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 13y ago
  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 13y ago
    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 13y ago
      >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 13y ago
    I agree with you on the JS front. Looking at you Yahoo mail -> and the user menu.
  • subsection1h 13y ago
    > 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 13y ago
      [deleted]
• mrspeaker 13y ago
  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 13y ago
  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
  • jeffmould 13y ago
    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-in-chrome/ http://www.jeffmould.com/2014/01/29/how-to-fix-google-fonts-...
  • aruggirello 13y ago
    Didn't Google fonts just add such a feature? (though it's still in beta)
  • kderbe 13y ago
    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#Optimizing_Requests https://developers.google.com/fonts/docs/getting_started#Opt... [2] https://www.youtube.com/watch?v=sqesm0euf9M https://www.youtube.com/watch?v=sqesm0euf9M
• joemaller1 13y ago
  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 13y ago
  > 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 13y ago
    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 13y ago
      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 13y ago
      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.
• bluthru 13y ago
  Digg.com is horrible for this. I can't believe that I see the images before the text.
• DanBC 13y ago
  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 13y ago
    http://www.lowing.org/fonts/ http://www.lowing.org/fonts/ I was just looking at this today and I agree, 'just give me courier'
• aniketpant 13y ago
  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 13y ago
    Let's not kid ourselves. Web fonts are 80% about branding and 20% about usability - on a good day.
• 100k 13y ago
  On mobile, it's the worst! I have to stare at a completely blank screen for several seconds while the fonts download.
• dhfjgkrgjg 13y ago
  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.
• ksk 13y ago
  Do you have any examples of this? I haven't noticed this occurring.
• dunham 13y ago
  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.)
• hippich 13y ago
  try data-uri's
• stagas 13y ago
  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.
• julie1 13y ago
  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
• eps 13y ago
  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.
• kolev 13y ago
  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!
• diaz 13y ago
  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.
• JoeAltmaier 13y ago
  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.