21 ms·

Web fonts, boy, I don't know

690 points by guessmyname 10y ago

vbezhenar 10y ago
Web page should just disable web fonts, if they are not loaded after 1 second and reenable them, when they are loaded. It's not hard to do and it's greatly improves usability. Actually it would be nice, if browsers would do it automatically, show system font, if web font is not cached and it's not going to be ready in the next few milliseconds. Anything better than white page.
- metafunctor 10y ago
  Chrome does something like this already. I think it's something the browser should take care of, rather than having every site use some half-baked JS solution which ends up just adding to the bloat.
Animats 10y ago
Fonts ought to have Subresource Integrity checksums, and clients should cache them effectively, even cross-site. It's not like they change much.
- dom0 10y ago
  And then we get cache fingerprinting attacks :) But then again we already have canvas fingerprinting... why bother with anything else until the browsers fix that?
  - BinaryIdiot 10y ago
    > And then we get cache fingerprinting attacks :) Not really. It all depends on how the cache is implemented. Maybe get an option for installing of a font or handle it like SSL and only install fonts from known, good actors which can be invalidated should one go bad.
- sp332 10y ago
  Caching doesn't help that much if you're only sending the subset of the font that you're actually using for a given page. I'm not sure the same font gets loaded from different places all that often either.
  - tux1968 10y ago
    If the recommended alternative is for everyone to use the handful of known system fonts, we very quickly arrive at everyone loading the same fonts anyway. Increasing that pool of options by having some additional choices in a cache would be nice -- especially for those of us on less popular OS's. And having to calculate a font subset per page and transmitting it along with the content doesn't sound like a winning tactic.
- Klathmon 10y ago
  This has been tried and failed many times in the past with other things. The biggest problems are with what a "canonical" version actually is, and security. Browser cache sizes are already too small to effectively cache things for one origin for any significant amount of time, and when you try to introduce cross-site caching you quickly run into a few issues. The big one for fonts is that you very rarely include a WHOLE font in your site, you generally include a subset of codes that you care about (if you are targeting english speaking users, no need to include russian characters...). But in addition to this, unless everyone everywhere agrees to load a specific version, file encoding, file format, compression format, compression settings, and more, the checksums will be so spread out as to be basically be useless. While it's less of an issue with fonts vs something like .js files, it can still be a problem. And someone else already touched on the security issue, but to go into more detail. At the very least, caching ANYTHING cross-origin lets any page you load probe for things in your cache. To use a bit of an absurdist example, A government website could try to load fonts used on a popular "terrorist" website, and if it gets a cache hit, they can immediately be pretty sure you have been on the site recently. The size of most caches, and the propensity for people to clear their cache (or use private browsing) means that this only gets more and more accurate. It's one of those things that sounds like a great idea on the surface, but in the end it would end up causing more issues than it solves. That being said, I believe there is a proposal somewhere for a standard along these lines, but I can't seem to find it any more.
  - Animats 10y ago
    Browser cache sizes are already too small to effectively cache things for one origin for any significant amount of time, and when you try to introduce cross-site caching you quickly run into a few issues. Oh? We have browsers eating a gigabyte of RAM now.
    - Klathmon 10y ago
      Which has nothing to do with cache sizes.
mslev 10y ago
For anyone missing the WW reference: https://www.youtube.com/watch?v=wvr1T1sFvEg https://www.youtube.com/watch?v=wvr1T1sFvEg
- dochtman 10y ago
  Hah, it's the main reason I clicked this one.
- cs2818 10y ago
  After instinctively reading the headline in a Rob Ritchie voice I am realizing I may have watched the West Wing too many times.
  - acchow 10y ago
    Currently on my fourth viewing of the series :) It's the only show I can watch over-and-over again.
    - chipx86 10y ago
      I'm pretty sure I've seen it at least 10 times now. I may have a problem. That said, it helped me get through a (terrible) US Government class back in college. There's a surprising amount of useful information in that series.
      - paulcole 10y ago
        There should be a 10x club (support group?). I think I've seen it about that many times, too. My favorite thing is how often Sorkin reuses the exact same lines throughout all of his works. I'm assuming this is 100% intentional, but haven't ruled out the possibility he was simply too high to remember what he wrote previously.
    - mslev 10y ago
      Only your fourth? ;) Definitely my favorite show.
- 10y ago
discreditable 10y ago
My feeling on web fonts is that that they can sometimes look nice but aren't worth the page weight. My approach is to pick two fonts I expect MacOS and Windows to have, then fall back to generic. Other times, I'm more lazy and just use the generic. To put it more bluntly: https://bestmotherfucking.website/#remote-fonts https://bestmotherfucking.website/#remote-fonts
- BinaryIdiot 10y ago
  I completely agree. I always choose two fonts that I am find with displaying which are available basically everywhere, then I add a default of san serif and I'm done with it. Yes some fonts do look better but after spending a better half of my career dealing with situations in which the latency for a computer and a server might be several seconds I've developed a bias against using web fonts. But if you want to use them make them optional like this site explains :)
- acdha 10y ago
  One problem with this approach is when you're relying on web fonts for Unicode character ranges which aren't universally supported by your visitors’ OS. A compromise approach which can work nicely is declaring @font-face values using unicode-range to target specific language blocks and then having your font-family be something like 'sans-serif, noto-sans-whatever` so it'll default to a similar system font but load the webfont when the page actually has a character which isn't in the system font.
  - heywire 10y ago
    I'm surprised that browser vendors aren't including the more popular fonts.
    - acdha 10y ago
      It'd be something else to manage updates for and the base OS support is pretty good on modern releases. These days, the gaps I see are for fairly obscure languages and since webfonts solve that problem and can do conditional downloads, I doubt it's worth the trouble.
mouzogu 10y ago
I have had the exact experience in the last month. Being on a slow connection, I've come to loath web fonts. There is nothing wrong with them in general but it's just that they've come to symbolise over-indulgence and a myopia towards the users actual task-focused needs as opposed to aesthetics. Part of the issue is dealing with progressive enhancement as far as slow internet connections go. How do you solve that problem? There is no native browser API to my knowledge that does not depend on using JS which isn't ideal imo. Would love an attribute on script and link tags that could be conditional based on connection speeds. P.S Would also encourage those who have the choice to use system fonts (https://medium.design/system-shock-6b1dc6d6596f https://medium.design/system-shock-6b1dc6d6596f) instead of web fonts. Seems more in-line with the spirit of the web and these fonts are very well tested in general.
- et-al 10y ago
  I was just going to say that Medium post about the system fonts was a great read and deserves a thread of its own, but it looks there there was one a year ago: https://news.ycombinator.com/item?id=10437485 https://news.ycombinator.com/item?id=10437485 > Would love an attribute on script and link tags that could be conditional based on connection speeds. Takes me back to the days when you would choose between an HTML version of a site, or a heavy Flash version. :)
  - colejohnson66 10y ago
    > > Would love an attribute on script and link tags that could be conditional based on connection speeds. > Takes me back to the days when you would choose between an HTML version of a site, or a heavy Flash version. :) Just use a lightweight Flash app to detect their connection speed, then load the appropriate site from there ;)
- Declanomous 10y ago
  As much as I believe font matters, I really think people should just use system fonts in general. No content is definitely more annoying than ugly content, but I have a seething hatred for webpages who jump around as content loads. "Let's click on this link... ah, not that link, let's go back. Yes, this link... NO! STOP MOVING!" Besides, I'm used to my fonts. I know your fonts are a deliberate design choice, but I'm here for content. Maybe I'm just a neophyte, because I think a smaller cleaner website is better than a reactive design that has to constantly change to cram everything in. I don't care though, it's stupid when I have to wait 10 seconds for a page to load on my home connection because you've got so much crap going on, and all the while the content is jumping around like a frog with it's butt on fire. If your site sucks, I'm not going to whine about it on twitter, I'm just going to stop visiting.
rndmize 10y ago
For God's sake man, don't leave a huge, fast gif infinitely looping where I can see it while trying to read your blog post. Make it activate after I scroll down to a certain point, or on hover, or anything that doesn't make me feel like I'm trying to read through a strobe light.
- dictum 10y ago
  Honestly, gifs in blog posts instantly add 50 years to my age. Before you give me the No Fun Allowed badge, let me explain: I'm probably reading your post because I'm searching for something, in a hurry (software: it breaks apart!). When I see a gif or beat-up meme in a software-related post, it does the opposite of lightening the mood.
  - SquareWheel 10y ago
    It also does the opposite of lightening the page load. The amount of bandwidth I've wasted due to silly animated gifs...
- metafunctor 10y ago
  I'm still waiting for the Chrome extension which loops gifs only when I hover on them.
  - striking 10y ago
    This exists, although it only works when you press Escape: https://chrome.google.com/webstore/detail/stop-animations/gemmknjnneiojfjelmgappppbaneikda# https://chrome.google.com/webstore/detail/stop-animations/ge... It works by taking a screenshot and layering it over the page until you try scrolling or hit Escape again.
- BinaryIdiot 10y ago
  I don't think hover would be very intuitive. Scrolling is probably the best bet here IMO though I didn't mind it as is.
- 10y ago
tyingq 10y ago
A 1.2 MB blog post complaining about bloat.
- striking 10y ago
  edit: read the child comments, I was not entirely correct. To be fair, the vast majority of that bloat is due to ~~the picture of her face~~ hidden GIFs on the page. Some testing reveals that the page, minus ~~her~~ those pictures, is 159KB. If you were anything like me on my first data plan (a whopping 25MB/month) images are usually the first thing to go.
  - montecarl 10y ago
    That image is only 17.6 kB.
    - pscsbs 10y ago
      It appears that most of the size comes from the two animated gifs.
- BinaryIdiot 10y ago
  You do realize sometimes it's okay to have a page larger than, say, 50kb. Right? The gifs were a great way to show the exact issues she was discussing and they take up the bulk of that space. So why is that a bad thing in any way? Yes web pages should, ideally, be small but that doesn't mean the media they show to the user has to be small as well.
  - tyingq 10y ago
    >You do realize sometimes it's okay to have a page larger than, say, 50kb. Right? 50KB isn't anywhere near 1.2MB. Did you mean 500KB? The blog post specifically mentioned an experience on a 2g connection, and the bloat associated with webfonts. Webfonts seem to typically be in the 50KB - 150KB range. I just find it ironic to complain about bloat from one type of artifact, in a blog post that uses even larger artifacts to make that point.
skizm 10y ago
Why are GIFs in articles a thing? Can anyone focus on the words while they are looping in the corner of your eye? I always open the inspector and delete the elements, but it is annoying to do that every time.
- danjc 10y ago
  Normally I'd agree with you but in this instance they really are being used to illustrate slow load. Still very distracting though.
- Slaul 10y ago
  I don't usually have a problem with them. I understand your frustration though, it would be useful to be able to minimize them maybe.
- kmfrk 10y ago
  The GIFs are fine - although I get the impression that they weren't put through an optimizer. Converting GIFs to autoplay=false videos is still a miserable experience with kinda awful results. Not to mention that it takes forever.
  - SquareWheel 10y ago
    Surely any screen recording software can output as a video format? Converting from video > gif > video would produce a janky output.
- notwaldorf 10y ago
  Sorry folks. I've changed them to just links
draw_down 10y ago
In truth, if web design took seriously the constraint of bad network connections, the result would be much different to what we have today. This is but one example. (And to be totally honest, if the author took that constraint seriously this page would be different as well.) But in that world, things would be less pretty and less flashy, and that stuff means more to people than they would care to admit.
- dictum 10y ago
  If there was a way to progressively enhance based on available resources (connection speed, usage metering, device performance, battery charge) we wouldn't have to compromise. As it is, you either design something really bare for the worst connection (which works for some content, but not all, and keeps us from effectively using the power we have in our devices) and serve it for all devices/connections, or design something for a mid-tier device/connection, which amounts to a bad experience on weak devices/connections and an unimaginative experience on better devices.
tvon 10y ago
I'm regularly annoyed by the flash when loading the Docker documentation, e.g. http://docs.docker.com/engine/reference/builder/ http://docs.docker.com/engine/reference/builder/ It's annoying enough to warrant using Stylish to override the web font.
- BinaryIdiot 10y ago
  Wow I never noticed that and now I can't unsee it and it's really distracting.
- joshdotsmith 10y ago
  Is this because of the web fonts or because of markdown rendering?
  - tvon 10y ago
    It is the web fonts, if I override 'body' and 'body p' then it loads quickly (the content does anyway, sidebars still flicker).
wickedlogic 10y ago
I feel like all developers should be forced to load their site over Amtrak wifi....
- symlinkk 10y ago
  Chrome Dev Tools have an option to simulate loading over slower connections (2G, 3G, etc). Not one for Amtrak wifi though ;)
elcapitan 10y ago
Are there actually font blockers like ad blockers? That would solve the problem pretty easily for everybody who's annoyed. Although they probably won't be available for mobile browsers, where it's the most painful.
- thebouv 10y ago
  On my iPhone I use Fusion by Firefox as an app that gives me the option to block ads AND web fonts. Love it.
  - hypertexthero 10y ago
    It's called Focus https://support.mozilla.org/en-US/kb/focus https://support.mozilla.org/en-US/kb/focus
    - thebouv 10y ago
      Ah, yep, my bad. I'm evaluating some other software called Fusion (completely non-related) and I guess it was just stuck in my brain. Focus is awesome. Interesting side-effect, it MAY be breaking Google AMP pages for me. I haven't really dug in to find out, but don't think a single AMP page has loaded for me on my phone.
- detaro 10y ago
  uBlock Origin has a switch to block "remote fonts". Should work in Firefox on Android as well.
  - dragonne 10y ago
    Firefox on Android has a switch for this. Menu -> Settings -> Advanced -> Show web fonts. The mobile web is remarkably faster to load with it off, even on wifi.
- metafunctor 10y ago
  What about sites that use fonts for icons only?
deleted 10y ago
[deleted]
drinchev 10y ago
Badly engineered, multi-purpose WordPress themes are my favorite on that matter. Not only they make you download the entire set of assets ( Think of ~2 icon fonts, half a megabyte stylesheets, megabytes of JS and on top of that 5$ DO box serving all the PHP `magic` ), but also include some entrance animations, which take additional time, before you focus on the content. Actually this reminds me of the IoT DDoS attack. The low-tech users, making a blog by clicking around and installing 25$ theme are actually unaware that their website drains mobile-bandwidth. So if you are developing one of these portfolio-with-landing-page-with-blog-section-woo-commerce-supported mega theme, please consider optimizing assets as your next priority.
- shash7 10y ago
  Most of these are premade themes from themeforest or other similar marketplaces. The devs have no incentive to optimize their themes as they are usually bought by non-tech people and they don't know how adding five different fonts in their website makes it really hard to load and render.
  - jamesdelaneyie 10y ago
    This is true, they don't understand how 5+ fonts make it hard to load and render. But they do care about bandied about stats like 83% of people will leave a site if it doesn't load in -0.3 milliseconds.
rocky1138 10y ago
This is one of the reasons I browse with all web fonts disabled.
- cm3 10y ago
  My primary reason is that I don't view a page on the same display and machine as the author, so more often than not the presentation is sub-optimal or entirely unreadable locally. Custom fonts are similarly abused like low-contrast text (grey on white). Also loading via JavaScript and changing the fonts of an already rendered page disrupts my reading. If you want remote fonts, load them from the beginning, or if this isn't possible, just don't, please. Another justification for disabling remote fonts is that it's one security critical interpreter of complex data which, when disabled, doesn't adversely affect the presentation, whereas on most pages disabling images does and cannot reasonably be disabled. The latter justification may go away with Mozilla's Oxidation efforts with time, leaving just loading time and readability as arguments.
- deleted 10y ago
  [deleted]
Illniyar 10y ago
When you hover on the links they flash like a 90's era webpage horror, why? is this what the cool kids do now?
forrestthewoods 10y ago
All web developers should be forced to spend a full week using their site on each of LTE, 3g, and 2g. If your website takes more than 10 seconds to load on an ad-block free LTE device you're fired. Relevant: Page Weight Matters (2012) http://blog.chriszacharias.com/page-weight-matters http://blog.chriszacharias.com/page-weight-matters
- Retra 10y ago
  There is absolutely nothing forcing people to use the internet through their phones, so I see no reason to force developers to optimize for it. Some people eat their food through a tube, but you wouldn't force every cook to prepare all of their food to be eaten through a straw. And there you at least have a moral argument.
  - forrestthewoods 10y ago
    Yes. Why would developers optimize for the platform that the majority of users use? Truly a question for the ages.
    - Retra 10y ago
      ALL web developers. All. That word means something. Just because something is popular doesn't mean everyone needs to cater to it.
WorldMaker 10y ago
I've been slowly adding the contents of Google Fonts into my system fonts storage as I see them used on sites that I visit often. Things like Open Sans and Roboto for instance are quite common. I think there would probably be a good case for an extension to automate that in some fashion for fonts with known open licenses (essentially anything from Google Fonts, for example) to go ahead and just install them into the system. There was at least one HN commenter I've seen that has claimed to just go ahead and install all of Google Fonts locally, which might be a bit extreme, but even automating that isn't necessarily a bad idea.
- jajern 10y ago
  If someone uses the Google CDN to load the font does the browser/website even look to see if the font is loaded on your local computer?
  - scotth 10y ago
    It does if the @font-face rule specifies a local() src.
  - WorldMaker 10y ago
    Browsers try to load local fonts before remote fonts. At least anecdotally I've never seen a Google Font/Google CDN font bypass a local font, at least not with the default Google Fonts CSS code.
  - chipotle_coyote 10y ago
    Assuming they're using pure CSS for the font loading (which is standard for Google's CDN), yes, the browser will use a local copy in preference. (There's a way to disable that in CSS's font spec, although it's hard to think of a good use for that.)
- Klathmon 10y ago
  You might not care, but as an FYI that can be used to fingerprint your browser more accurately. And if you are a developer, make sure you correctly test your site on machines that DO NOT have the fonts installed, as the browser won't even try to load them if it already has them, and you'll likely never find any bugs related to that until it's too late.
CoolGuySteve 10y ago
I had the exact same problem in China last month, only worse because I was also going through a crowded VPN. The only page I could reliably load before losing patience was Hacker News. The best workaround I found was to load Opera Mini and crank up the compression proxy. It's annoying though, if Opera Mini can automatically compress the page's imaging and formatting, why can't the web server do the same? We can nag designers/developers all day long about web fonts and whatnot, but at the end of the day, only an automated solution is going to actually get put into regular use.
hpaavola 10y ago
What fonts are available in recent versions of all major operating systems? So what are the "web safe" fonts of 2016?
- gkya 10y ago
  serif, sans-serif, monospace
- Freak_NL 10y ago
  There are no more guarantees about which font is installed, although you will probably get a decent match if you use one of the old Microsoft core fonts (Verdana, Times New Roman, etc.). Just don't expect the exact font; often you will get a font that matches the metrics for the one you've chosen as a fall-back for those (once) popular fonts. In any case, you can always safely specify one of these font groups: sans-serif, serif, monospace. These will give you the user's default font for that broad category of typefaces. No guarantees about which font you will get though. If you do want to leverage installed fonts, you can craft a decent so-called font-stack that will cover a lot of fonts typically installed on various OSes. For instance, you might specify: /* Just an example, these do not necessarily match. */ "DejaVu Sans", "Bitstream Vera Sans", "Droid Sans", Verdana, sans-serif; Again, no guarantees, that is why we have web-fonts. Also, I am probably missing something, but don't you just get the fall-back font (e.g., whatever matches sans-serif) with a web-font as long as you specify one? Isn't that common CSS knowledge among developers?
  - angry-hacker 10y ago
    You do get fallback but might experience FOIT and other nasty things.
- PuffinBlue 10y ago
  These two posts were useful to me: https://mondaybynoon.com/linux-font-equivalents-to-popular-web-typefaces/ https://mondaybynoon.com/linux-font-equivalents-to-popular-w... http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html I used them when sorting the fonts for my site as I wasn't happy with the web font performance and switched to 'web safe'. There are some good comparisons there. You can see my choice in action here: https://josharcher.uk https://josharcher.uk
iamandoni 10y ago
That invisible ink at the top is a good subtle touch.
innocenat 10y ago
One thing this completely missed are non-Latin script. For example, the default Thai font on Windows is just plain ugly.
mhd 10y ago
I despise icon fonts with a raging passion. It feels like we're back in 8 bit time where we're using sprites for things that Man Wasn't Meant To Do with them. Web fonts as real world fonts are kinda-sorta okay. Although it's yet another area where "All the world's a VAX" can proliferate, when designers think everyone's got the Windows font engine or their MacBook/iPhone's Hippidippi display.
- deleted 10y ago
  [deleted]
niftich 10y ago
The gripes are valid and some of the links about fixing it are good content. I'm starting to sound old, but "back in my day" people would use the 'media' parameter in link tags to load mobile-specific stylesheets. Has this practice died out? If so, why?
- angry-hacker 10y ago
  You can do it but designers want consistency on every device pixel perfect bla bla. All major OS providers should included in all the Google fonts by default and we can move on with our lives.
JepZ 10y ago
If she cares so much about the experience, why does she use an iphone after all?!?
jaredcwhite 10y ago
Yes, web fonts often suck on slow connections. Meanwhile, on fast-ish connections, I find the FOUC effect to be greatly annoying. That 1-2 seconds of seeing Times and Helvetica and then seeing Freight Text Pro and Proxima Nova drives me bonkers. I think there must be some kind of happy medium between FOUC for faster connections and rage-inducing FOIC for slow connections. Unfortunately, most devs (and sadly I claim to be one) don't test their sites frequently on a range of connection speeds so it's common to have badly-tuned font dynamics on sites. Bottom line: as someone who cares about design and visual experiences, I don't think the answer is just accept and live with FOUC everywhere. Browsers and dev tooling both need to improve in order to find that happy medium.
- adambrenecki 10y ago
  I think the Chrome behaviour (display invisible content for a while, then after a timeout render using fallback fonts) would be a happy compromise were the timeout not three whole seconds. font-display: optional and font-display: fallback (as linked in the article) look like promising solutions to the problem (both recommend a FOIC aka 'block period' of 100ms), but it'd be even nicer to set the exact duration of the block and swap periods in CSS.
initram 10y ago
I find web fonts so annoying, along with images that don't load until you scroll to them. I usually read in Reader mode, and it takes the loaded page and re-renders it without web fonts in a normal style. But when the site doesn't load all the images, I end up missing half the article because I can't see what they're talking about. So annoying.
NumberCruncher 10y ago
Tl;dr: if you are travelling in a foreign country and you think about whatever fonts... girl, you are doing it totally wrong. Buy a city guide, printed on good old fashioned paper, even if it is so 1990, and get a fuck off-line! Or just talk to the natives! In person!
- jamra 10y ago
  I think you are a bit off with your comment. Having a web connection makes traveling much nicer. The authors mistake was not pre purchasing a data sim with a fast connection. Amateur traveler complaining about nonsense
  - NumberCruncher 10y ago
    The next time I pick up a chick I chatted up on a trip and I can't find back to my b'n'b because we both are so wasted and I don't have internet connection to use google maps I hope you will be there. At first to be able to use your 4G phone and at second to prove you how wrong you are.
    - deleted 10y ago
      [deleted]
    - jamra 10y ago
      Did you read my comment? Get a data plan before you travel and you'll be slow internet proof.
    - jamra 10y ago
      Did you read my comment? Get a data plan before you travel and you'll be slow internet proof.
      - NumberCruncher 10y ago
        Did you read my comment? I do not want to be [paste an "indispensable" first world service] proof if I am in a foreign country because it kills the advanture and makes me thinking about fonts and cats.
metafunctor 10y ago
The HN crowd frequently compliments Stripe on their good looking, functional, well designed web pages. The Stripe home page is 75% web fonts (432k).
- syrrim 10y ago
  To be fair, 500k, at least compared to some webpages, is actually a fairly small size. This isn't really a case where a percent of the total is useful.
ivanhoe 10y ago
Problem is that lazy loading will introduce a flicker on fast connections or if the font is already in browser's cache since re-rendering of the page takes some amount of time (more content, slower it will be). And if you have multiple pages, this means this will affect even people on slow connections on every page except the first one. So it's not a win-win solution, one side will have more or less degraded experience.
makecheck 10y ago
Are web fonts smart enough to download only the symbols that you’re using? With Unicode growing all the time, and fonts supporting significant parts of that total set, it would be insane to have to download hundreds of thousands of symbols when you’re just trying to write a 3-word headline. Another problem is aggressive filtering, oddly. I once visited China and found my entire web site wouldn’t load; it turned out to be triggered by a font from a Google domain. How silly for content to be thrown out because an optional style element is unavailable. I have since stripped out all my Google dependencies.
- kowdermeister 10y ago
  For icon fonts you can use this great service to generate only what you need from various icon fonts: http://fontastic.me/ http://fontastic.me/
- Raticide 10y ago
  Nope, I don't think so. It would be hard to pull off as you might be using the font on an <input> and the user could type any character. Or you could be pulling text in through an XHR and won't know in advance what characters will be returned.
kutkloon7 10y ago
I absolutely do not understand the need for 'web fonts'. Just specify a normal font that most users already have installed in CSS, with some fallbacks. 'Progressive styling' is way more annoying (in my humble opinion) than waiting some time. Pages like the verge can take minutes anyway, when the wifi is not optimal. When you do things progressively, the page just keeps on changing, and the page can't really be used. So if you have a long page with text, and the user is somewhere halfway, the font loads and... BOOM! You are reading text that is located 8 paragraphs from where you were reading one instant ago. This is far more annoying with images which dont specify their size, but I would still consider it bad practice to use an uncommon font for non-artistic pages.
- Kalium 10y ago
  > I absolutely do not understand the need for 'web fonts'. Just specify a normal font that most users already have installed in CSS, with some fallbacks. Imagine you're a company whose business operates exclusively through your website. Imagine further that your company is the sort for whom design is critical because it drives your business. You are going to insist on making sure everything looks perfect in every scenario. You can think of it as design control-freakery. Typography really matters to some people.
  - HelloNurse 10y ago
    "The sort of company for whom design is critical" doesn't coincide at all with the sort of company for whose website a pixel-perfect layout makes sense. Why would expert designers show off bad typography instead of good, and in the website rather than in products? This "design control-freakery" proves that someone doesn't master simple and proven web technology. Why would you trust them with something technically complex like faithful color printing or something "artistic" like designing a logo?
- mcbits 10y ago
  The shifting page layout is a symptom of a broader problem, in that it's impossible to accurately predict or specify the rendered dimensions of text. Even measuring a container after the fact is unreliable because of the arbitrary amount of whitespace in different fonts. You'd have to generate a bitmap image and detect a bounding box around the pixels, which definitely won't help with loading times. This can't be done at development time because different browsers and system configurations all render the same fonts slightly differently. So, even sticking with system fonts to avoid this one symptom, we have this giant elephant in the room making it difficult to ensure anything but the most primitive layouts will be legible across devices.
incompatible 10y ago
I got a message from my provider to say they are closing down their 2G network next year since hardly anyone uses it and they want to reuse the bandwidth for something else. Maybe this protocol will die out soon.
tribby 10y ago
it's easy enough to edit web fonts to include only necessary characters, but most EULAs won't allow for this. any font licensed under the SIL open font license is fine, though you may have to change the font's name if it has a reserved font name (check the license file). this makes a huge difference (fonts under 10k), but no one ever bothers to do it. not sure if inlining them as base64 in your CSS and serving with gzip would help much more. a lot of the stuff that we do in font editors is going to start happening in-browser. variable fonts that use two masters (the thinnest and heaviest font weights) to interpolate all the other weights in-browser are an emerging standard that will get font sizes down[0]. you're essentially being sent two fonts over the wire that can generate quite a few more. font files are bloated in a number of ways. eventually we'll have a standard where diacritics like ¨´ etc can automatically be added to letters without the need for an entirely separate glyph. (å,a,á,ä, are currently separate, which is very expensive). google, adobe, and other big players are hard at work on this stuff, and it won't be long. there are pain points now, for sure, but to me this isn't an argument in favor of system fonts. most of web design is typography design, and anyone who says otherwise probably hasn't been designing for the web very long. 0. http://blog.typekit.com/2016/09/14/variable-fonts-a-new-kind-of-font-for-flexible-design/ http://blog.typekit.com/2016/09/14/variable-fonts-a-new-kind...
codedokode 10y ago
I think the easiest solution would be just not to use web fonts at all. Do you need fancy fonts on a website with technical documentation? I think you don't but sadly PHP developers added a whole megabyte of fonts to PHP manual. As a result one has to wait until the fonts are loaded to see the text. And web fonts are often poorly rendered on Windows. I want an option in Chromium that would allow disabling web fonts by default and enabling them on a per-site basis (like it has an option for disabling JS). And what surprises me most is that mobile browsers (which are often used on slow and metered connections) do not have such options at all. I remember old Opera browser that is now long gone had a lot of options to make user experience better on poor connections (and a builtin domain block list). Well, at those times internet users had higher average IQ and now typical Internet user would not even understand what is the meaning of "disable JS".
- stomato 10y ago
  > I think the easiest solution would be just not to use web fonts at all. Here's another option: plain text. That's right. You can have webpages that are plain text without any HTML formatting, and they will render. Here is an example file: This is text. This is the absolute best way of presenting web content. No one will complain.
  - codedokode 10y ago
    The difference between web fonts and HTML/CSS is that HTML loads progressively and markup doesn't weight more than all other resources. So I am ok with both plain text and HTML pages but not ok with fonts until browser vendors make a better implementation and make them optional.
  - wingerlang 10y ago
    > This is the absolute best way of presenting web content. No one will complain. Not sure if this is a joke or not, most people would complain.
- mos_basik 10y ago
  >I want an option in Chromium that would allow disabling web fonts by default and enabling them on a per-site basis. It's not a native solution, but apparently the extension uBlock Origin has a setting to block web fonts (people have mentioned it in this thread). I use uBlock Origin as my adblocker, and it is a much better experience in terms of performance and usability than AdBlock ever was - so I wouldn't be surprised if the font option was equally well implemented. On mobile currently, but will try it out when I get to my computer. As for toggling, there is a nice simple button that enables/disables the adblocking on the active site. I'm hoping it affects the font setting too. PS: that's uBlock Origin, not just uBlock.
okonomiyaki3000 10y ago
As she's in Taiwan, she might have mentioned that webfonts, despite any pros and cons they have for western language sites, will never (never say "never"...) be useful for Chinese or Japanese sites. A bit off the topic of the article but maybe adds some perspective. Or not.
niftylettuce 10y ago
For web fonts in emails, look no further than my latest package `custom-fonts-in-emails` for Node.js. https://github.com/crocodilejs/custom-fonts-in-emails#custom-fonts-in-emails https://github.com/crocodilejs/custom-fonts-in-emails#custom...
- timboslice 10y ago
  pretty cool. love the fast-levenshtein addition - can't tell you how many times user error has killed me (used the wrong extension or missed a letter)
frivoal 10y ago
I blame the browsers. There's no deep reason you have to introduce a piece of javascript to hide stuff from the browser so that it can load the page normally, and then add back the fonts. If browsers cared about making the web usable for everybody more than they cared about making web page look like slick native apps, they'd do it for you. The way browser internals work is already designed for that. if the network is slow and you get only half the html, half the css, miss some images, or whatever, the browser will render as best as it can with what it got so far, and re-render when it gets the rest. The fact that it doesn't do that with fonts sucks.
daodedickinson 10y ago
Ehhh. Slowness has its benefits. But you need to know the fallout that will result.
Crenchaw 10y ago
Custom fonts and web fonts are fine... if they are stored on the same web server, so they load with the document. Images are fine... if you specify the width and height so the page doesn't jump around while the page loads. Menus and top bars that change when you scroll down are never acceptable. It's distracting and unnecessary. Goofy background and image effects in general are very annoying if they are synced with page scrolling. It reminds me of a child's pop-up book.
lacampbell 10y ago
Off topic, but the first paragraph mentioned using 2G mobile internet in Taiwan... why!? 4G is cheap and plentiful there. https://guidetotaipei.com/article/cell-phones-and-sim-cards https://guidetotaipei.com/article/cell-phones-and-sim-cards ($100 TW = $3.18 US)
- scott_karana 10y ago
  I was curious about that too... Are there any rural or wilderness areas where the quality would downgrade, maybe?
- notwaldorf 10y ago
  I was roaming! T-mobile gives me free 2G when roaming, and I don't like temporary SIM cards because nobody knows how to call me if there's an emergency :(
williamsharkey 10y ago
I wish that system fonts could be told the size of the characters of a web font upfront, before the web font was loaded. The system font's glyphs should smoothly fade/morph into the target webfont once it is loaded. To solve the problem generally would be difficult or equivalent to the effort/data required to download the web font in the first place, but there may be a quick and dirty solution that covers 99% of text in the wild. The easiest case is monos paced fonts. Is there really an excuse why the system font can't be told via Css what spacing/height to use to match the target webfont?
- williamsharkey 10y ago
  To be more explicit, it is insane that we find it acceptable for text to reflow/ break over lines at different points once the web font is loaded. There is something that bugs me -- On the one hand we are being considerate and trying to make the reading experience pleasant. On the other hand we are being careless creators of jank. Maybe jank is something that primarily irritates nerds and I am overreacting.
deleted 10y ago
[deleted]
DocTomoe 10y ago
> awesome free roaming 2G So instead of fixing the real problem - which is obviously connectivity - we need to break the web and add another layer of Javascript complexity to something that works perfectly fine without. It's 2016. 2G is 25 years old (started in 1991!). Stop being cheap. Stop working with 2G.
- moonbug 10y ago
  There is life beyond SV, and not all of it has your infrastructure.
- bakli 10y ago
  I think you're used to the developed world. Here in India, most of the places (except big cities) only get 2G. 3G towers are being laid and will probably be operational in 2-3 years.
rcarmo 10y ago
I just gave up on web fonts and go with Georgia, Arial and a sensible set of fallbacks (although I try Menlo instead of Courier first, because it's ugly in retina)
b1daly 10y ago
I'm mystified by how many major sites have terrible usability issues on mobile devices that are used widely. (older iDevices cheap-mid level Android phones). Are the proprietors of these sites, which live and die on their traffic, actually unaware of how bad the experience is? Or are the proprietors oblivious because they always have the latest iPhone or Galaxy? Are the developers oblivious too, or are they keeping their bosses in the dark? Or are the business requirements for the sight so absolutely needed, and it is simply hard to make it work? Anyone able to venture a perspective on this?
- jonatron 10y ago
  >Are the proprietors oblivious because they always have the latest iPhone or Galaxy? Probably. They can say "I've checked it on mobile".
mrec 10y ago
I had a very strong impression that the quality of Web typography took a colossal nosedive when web fonts became a thing. My suspicion at the time was that this was largely a result of designers pushing pet fonts that looked fine on their Mac but like crap on other OSes (due to different rendering/hinting algos); can't prove that, though. I did try disabling web fonts in Firefox, but then that semi-broke sites like GitHub who seemed to think that using them to display UI button images was a good idea. This is why we can't have nice things. And why designers are sometimes held in less esteem than they might like.
jacobmischka 10y ago
Really love the title, nice article.

690 points by guessmyname 10y ago

Web page should just disable web fonts, if they are not loaded after 1 second and reenable them, when they are loaded. It's not hard to do and it's greatly improves usability. Actually it would be nice, if browsers would do it automatically, show system font, if web font is not cached and it's not going to be ready in the next few milliseconds. Anything better than white page.

metafunctor 10y ago
Chrome does something like this already. I think it's something the browser should take care of, rather than having every site use some half-baked JS solution which ends up just adding to the bloat.

Animats 10y ago

Fonts ought to have Subresource Integrity checksums, and clients should cache them effectively, even cross-site. It's not like they change much.

dom0 10y ago
And then we get cache fingerprinting attacks :) But then again we already have canvas fingerprinting... why bother with anything else until the browsers fix that?
- BinaryIdiot 10y ago
  > And then we get cache fingerprinting attacks :) Not really. It all depends on how the cache is implemented. Maybe get an option for installing of a font or handle it like SSL and only install fonts from known, good actors which can be invalidated should one go bad.
sp332 10y ago
Caching doesn't help that much if you're only sending the subset of the font that you're actually using for a given page. I'm not sure the same font gets loaded from different places all that often either.
- tux1968 10y ago
  If the recommended alternative is for everyone to use the handful of known system fonts, we very quickly arrive at everyone loading the same fonts anyway. Increasing that pool of options by having some additional choices in a cache would be nice -- especially for those of us on less popular OS's. And having to calculate a font subset per page and transmitting it along with the content doesn't sound like a winning tactic.
Klathmon 10y ago
This has been tried and failed many times in the past with other things. The biggest problems are with what a "canonical" version actually is, and security. Browser cache sizes are already too small to effectively cache things for one origin for any significant amount of time, and when you try to introduce cross-site caching you quickly run into a few issues. The big one for fonts is that you very rarely include a WHOLE font in your site, you generally include a subset of codes that you care about (if you are targeting english speaking users, no need to include russian characters...). But in addition to this, unless everyone everywhere agrees to load a specific version, file encoding, file format, compression format, compression settings, and more, the checksums will be so spread out as to be basically be useless. While it's less of an issue with fonts vs something like .js files, it can still be a problem. And someone else already touched on the security issue, but to go into more detail. At the very least, caching ANYTHING cross-origin lets any page you load probe for things in your cache. To use a bit of an absurdist example, A government website could try to load fonts used on a popular "terrorist" website, and if it gets a cache hit, they can immediately be pretty sure you have been on the site recently. The size of most caches, and the propensity for people to clear their cache (or use private browsing) means that this only gets more and more accurate. It's one of those things that sounds like a great idea on the surface, but in the end it would end up causing more issues than it solves. That being said, I believe there is a proposal somewhere for a standard along these lines, but I can't seem to find it any more.
- Animats 10y ago
  Browser cache sizes are already too small to effectively cache things for one origin for any significant amount of time, and when you try to introduce cross-site caching you quickly run into a few issues. Oh? We have browsers eating a gigabyte of RAM now.
  - Klathmon 10y ago
    Which has nothing to do with cache sizes.

mslev 10y ago

For anyone missing the WW reference: https://www.youtube.com/watch?v=wvr1T1sFvEg https://www.youtube.com/watch?v=wvr1T1sFvEg

dochtman 10y ago
Hah, it's the main reason I clicked this one.
cs2818 10y ago
After instinctively reading the headline in a Rob Ritchie voice I am realizing I may have watched the West Wing too many times.
- acchow 10y ago
  Currently on my fourth viewing of the series :) It's the only show I can watch over-and-over again.
  - chipx86 10y ago
    I'm pretty sure I've seen it at least 10 times now. I may have a problem. That said, it helped me get through a (terrible) US Government class back in college. There's a surprising amount of useful information in that series.
    - paulcole 10y ago
      There should be a 10x club (support group?). I think I've seen it about that many times, too. My favorite thing is how often Sorkin reuses the exact same lines throughout all of his works. I'm assuming this is 100% intentional, but haven't ruled out the possibility he was simply too high to remember what he wrote previously.
  - mslev 10y ago
    Only your fourth? ;) Definitely my favorite show.
10y ago

discreditable 10y ago

My feeling on web fonts is that that they can sometimes look nice but aren't worth the page weight. My approach is to pick two fonts I expect MacOS and Windows to have, then fall back to generic. Other times, I'm more lazy and just use the generic. To put it more bluntly: https://bestmotherfucking.website/#remote-fonts https://bestmotherfucking.website/#remote-fonts

BinaryIdiot 10y ago
I completely agree. I always choose two fonts that I am find with displaying which are available basically everywhere, then I add a default of san serif and I'm done with it. Yes some fonts do look better but after spending a better half of my career dealing with situations in which the latency for a computer and a server might be several seconds I've developed a bias against using web fonts. But if you want to use them make them optional like this site explains :)
acdha 10y ago
One problem with this approach is when you're relying on web fonts for Unicode character ranges which aren't universally supported by your visitors’ OS. A compromise approach which can work nicely is declaring @font-face values using unicode-range to target specific language blocks and then having your font-family be something like 'sans-serif, noto-sans-whatever` so it'll default to a similar system font but load the webfont when the page actually has a character which isn't in the system font.
- heywire 10y ago
  I'm surprised that browser vendors aren't including the more popular fonts.
  - acdha 10y ago
    It'd be something else to manage updates for and the base OS support is pretty good on modern releases. These days, the gaps I see are for fairly obscure languages and since webfonts solve that problem and can do conditional downloads, I doubt it's worth the trouble.

mouzogu 10y ago

I have had the exact experience in the last month. Being on a slow connection, I've come to loath web fonts. There is nothing wrong with them in general but it's just that they've come to symbolise over-indulgence and a myopia towards the users actual task-focused needs as opposed to aesthetics. Part of the issue is dealing with progressive enhancement as far as slow internet connections go. How do you solve that problem? There is no native browser API to my knowledge that does not depend on using JS which isn't ideal imo. Would love an attribute on script and link tags that could be conditional based on connection speeds. P.S Would also encourage those who have the choice to use system fonts (https://medium.design/system-shock-6b1dc6d6596f https://medium.design/system-shock-6b1dc6d6596f) instead of web fonts. Seems more in-line with the spirit of the web and these fonts are very well tested in general.

et-al 10y ago
I was just going to say that Medium post about the system fonts was a great read and deserves a thread of its own, but it looks there there was one a year ago: https://news.ycombinator.com/item?id=10437485 https://news.ycombinator.com/item?id=10437485 > Would love an attribute on script and link tags that could be conditional based on connection speeds. Takes me back to the days when you would choose between an HTML version of a site, or a heavy Flash version. :)
- colejohnson66 10y ago
  > > Would love an attribute on script and link tags that could be conditional based on connection speeds. > Takes me back to the days when you would choose between an HTML version of a site, or a heavy Flash version. :) Just use a lightweight Flash app to detect their connection speed, then load the appropriate site from there ;)
Declanomous 10y ago
As much as I believe font matters, I really think people should just use system fonts in general. No content is definitely more annoying than ugly content, but I have a seething hatred for webpages who jump around as content loads. "Let's click on this link... ah, not that link, let's go back. Yes, this link... NO! STOP MOVING!" Besides, I'm used to my fonts. I know your fonts are a deliberate design choice, but I'm here for content. Maybe I'm just a neophyte, because I think a smaller cleaner website is better than a reactive design that has to constantly change to cram everything in. I don't care though, it's stupid when I have to wait 10 seconds for a page to load on my home connection because you've got so much crap going on, and all the while the content is jumping around like a frog with it's butt on fire. If your site sucks, I'm not going to whine about it on twitter, I'm just going to stop visiting.

rndmize 10y ago

For God's sake man, don't leave a huge, fast gif infinitely looping where I can see it while trying to read your blog post. Make it activate after I scroll down to a certain point, or on hover, or anything that doesn't make me feel like I'm trying to read through a strobe light.

dictum 10y ago
Honestly, gifs in blog posts instantly add 50 years to my age. Before you give me the No Fun Allowed badge, let me explain: I'm probably reading your post because I'm searching for something, in a hurry (software: it breaks apart!). When I see a gif or beat-up meme in a software-related post, it does the opposite of lightening the mood.
- SquareWheel 10y ago
  It also does the opposite of lightening the page load. The amount of bandwidth I've wasted due to silly animated gifs...
metafunctor 10y ago
I'm still waiting for the Chrome extension which loops gifs only when I hover on them.
- striking 10y ago
  This exists, although it only works when you press Escape: https://chrome.google.com/webstore/detail/stop-animations/gemmknjnneiojfjelmgappppbaneikda# https://chrome.google.com/webstore/detail/stop-animations/ge... It works by taking a screenshot and layering it over the page until you try scrolling or hit Escape again.
BinaryIdiot 10y ago
I don't think hover would be very intuitive. Scrolling is probably the best bet here IMO though I didn't mind it as is.
10y ago

tyingq 10y ago

A 1.2 MB blog post complaining about bloat.

striking 10y ago
edit: read the child comments, I was not entirely correct. To be fair, the vast majority of that bloat is due to ~~the picture of her face~~ hidden GIFs on the page. Some testing reveals that the page, minus ~~her~~ those pictures, is 159KB. If you were anything like me on my first data plan (a whopping 25MB/month) images are usually the first thing to go.
- montecarl 10y ago
  That image is only 17.6 kB.
  - pscsbs 10y ago
    It appears that most of the size comes from the two animated gifs.
BinaryIdiot 10y ago
You do realize sometimes it's okay to have a page larger than, say, 50kb. Right? The gifs were a great way to show the exact issues she was discussing and they take up the bulk of that space. So why is that a bad thing in any way? Yes web pages should, ideally, be small but that doesn't mean the media they show to the user has to be small as well.
- tyingq 10y ago
  >You do realize sometimes it's okay to have a page larger than, say, 50kb. Right? 50KB isn't anywhere near 1.2MB. Did you mean 500KB? The blog post specifically mentioned an experience on a 2g connection, and the bloat associated with webfonts. Webfonts seem to typically be in the 50KB - 150KB range. I just find it ironic to complain about bloat from one type of artifact, in a blog post that uses even larger artifacts to make that point.

skizm 10y ago

Why are GIFs in articles a thing? Can anyone focus on the words while they are looping in the corner of your eye? I always open the inspector and delete the elements, but it is annoying to do that every time.

danjc 10y ago
Normally I'd agree with you but in this instance they really are being used to illustrate slow load. Still very distracting though.
Slaul 10y ago
I don't usually have a problem with them. I understand your frustration though, it would be useful to be able to minimize them maybe.
kmfrk 10y ago
The GIFs are fine - although I get the impression that they weren't put through an optimizer. Converting GIFs to autoplay=false videos is still a miserable experience with kinda awful results. Not to mention that it takes forever.
- SquareWheel 10y ago
  Surely any screen recording software can output as a video format? Converting from video > gif > video would produce a janky output.
notwaldorf 10y ago
Sorry folks. I've changed them to just links

draw_down 10y ago

In truth, if web design took seriously the constraint of bad network connections, the result would be much different to what we have today. This is but one example. (And to be totally honest, if the author took that constraint seriously this page would be different as well.) But in that world, things would be less pretty and less flashy, and that stuff means more to people than they would care to admit.

dictum 10y ago
If there was a way to progressively enhance based on available resources (connection speed, usage metering, device performance, battery charge) we wouldn't have to compromise. As it is, you either design something really bare for the worst connection (which works for some content, but not all, and keeps us from effectively using the power we have in our devices) and serve it for all devices/connections, or design something for a mid-tier device/connection, which amounts to a bad experience on weak devices/connections and an unimaginative experience on better devices.

tvon 10y ago

I'm regularly annoyed by the flash when loading the Docker documentation, e.g. http://docs.docker.com/engine/reference/builder/ http://docs.docker.com/engine/reference/builder/ It's annoying enough to warrant using Stylish to override the web font.

BinaryIdiot 10y ago
Wow I never noticed that and now I can't unsee it and it's really distracting.
joshdotsmith 10y ago
Is this because of the web fonts or because of markdown rendering?
- tvon 10y ago
  It is the web fonts, if I override 'body' and 'body p' then it loads quickly (the content does anyway, sidebars still flicker).

wickedlogic 10y ago

I feel like all developers should be forced to load their site over Amtrak wifi....

symlinkk 10y ago
Chrome Dev Tools have an option to simulate loading over slower connections (2G, 3G, etc). Not one for Amtrak wifi though ;)

elcapitan 10y ago

Are there actually font blockers like ad blockers? That would solve the problem pretty easily for everybody who's annoyed. Although they probably won't be available for mobile browsers, where it's the most painful.

thebouv 10y ago
On my iPhone I use Fusion by Firefox as an app that gives me the option to block ads AND web fonts. Love it.
- hypertexthero 10y ago
  It's called Focus https://support.mozilla.org/en-US/kb/focus https://support.mozilla.org/en-US/kb/focus
  - thebouv 10y ago
    Ah, yep, my bad. I'm evaluating some other software called Fusion (completely non-related) and I guess it was just stuck in my brain. Focus is awesome. Interesting side-effect, it MAY be breaking Google AMP pages for me. I haven't really dug in to find out, but don't think a single AMP page has loaded for me on my phone.
detaro 10y ago
uBlock Origin has a switch to block "remote fonts". Should work in Firefox on Android as well.
- dragonne 10y ago
  Firefox on Android has a switch for this. Menu -> Settings -> Advanced -> Show web fonts. The mobile web is remarkably faster to load with it off, even on wifi.
metafunctor 10y ago
What about sites that use fonts for icons only?

deleted 10y ago

[deleted]

drinchev 10y ago

Badly engineered, multi-purpose WordPress themes are my favorite on that matter. Not only they make you download the entire set of assets ( Think of ~2 icon fonts, half a megabyte stylesheets, megabytes of JS and on top of that 5$ DO box serving all the PHP `magic` ), but also include some entrance animations, which take additional time, before you focus on the content. Actually this reminds me of the IoT DDoS attack. The low-tech users, making a blog by clicking around and installing 25$ theme are actually unaware that their website drains mobile-bandwidth. So if you are developing one of these portfolio-with-landing-page-with-blog-section-woo-commerce-supported mega theme, please consider optimizing assets as your next priority.

shash7 10y ago
Most of these are premade themes from themeforest or other similar marketplaces. The devs have no incentive to optimize their themes as they are usually bought by non-tech people and they don't know how adding five different fonts in their website makes it really hard to load and render.
- jamesdelaneyie 10y ago
  This is true, they don't understand how 5+ fonts make it hard to load and render. But they do care about bandied about stats like 83% of people will leave a site if it doesn't load in -0.3 milliseconds.

rocky1138 10y ago

This is one of the reasons I browse with all web fonts disabled.

cm3 10y ago
My primary reason is that I don't view a page on the same display and machine as the author, so more often than not the presentation is sub-optimal or entirely unreadable locally. Custom fonts are similarly abused like low-contrast text (grey on white). Also loading via JavaScript and changing the fonts of an already rendered page disrupts my reading. If you want remote fonts, load them from the beginning, or if this isn't possible, just don't, please. Another justification for disabling remote fonts is that it's one security critical interpreter of complex data which, when disabled, doesn't adversely affect the presentation, whereas on most pages disabling images does and cannot reasonably be disabled. The latter justification may go away with Mozilla's Oxidation efforts with time, leaving just loading time and readability as arguments.
deleted 10y ago
[deleted]

Illniyar 10y ago

When you hover on the links they flash like a 90's era webpage horror, why? is this what the cool kids do now?

forrestthewoods 10y ago

All web developers should be forced to spend a full week using their site on each of LTE, 3g, and 2g. If your website takes more than 10 seconds to load on an ad-block free LTE device you're fired. Relevant: Page Weight Matters (2012) http://blog.chriszacharias.com/page-weight-matters http://blog.chriszacharias.com/page-weight-matters

Retra 10y ago
There is absolutely nothing forcing people to use the internet through their phones, so I see no reason to force developers to optimize for it. Some people eat their food through a tube, but you wouldn't force every cook to prepare all of their food to be eaten through a straw. And there you at least have a moral argument.
- forrestthewoods 10y ago
  Yes. Why would developers optimize for the platform that the majority of users use? Truly a question for the ages.
  - Retra 10y ago
    ALL web developers. All. That word means something. Just because something is popular doesn't mean everyone needs to cater to it.

WorldMaker 10y ago

I've been slowly adding the contents of Google Fonts into my system fonts storage as I see them used on sites that I visit often. Things like Open Sans and Roboto for instance are quite common. I think there would probably be a good case for an extension to automate that in some fashion for fonts with known open licenses (essentially anything from Google Fonts, for example) to go ahead and just install them into the system. There was at least one HN commenter I've seen that has claimed to just go ahead and install all of Google Fonts locally, which might be a bit extreme, but even automating that isn't necessarily a bad idea.

jajern 10y ago
If someone uses the Google CDN to load the font does the browser/website even look to see if the font is loaded on your local computer?
- scotth 10y ago
  It does if the @font-face rule specifies a local() src.
- WorldMaker 10y ago
  Browsers try to load local fonts before remote fonts. At least anecdotally I've never seen a Google Font/Google CDN font bypass a local font, at least not with the default Google Fonts CSS code.
- chipotle_coyote 10y ago
  Assuming they're using pure CSS for the font loading (which is standard for Google's CDN), yes, the browser will use a local copy in preference. (There's a way to disable that in CSS's font spec, although it's hard to think of a good use for that.)
Klathmon 10y ago
You might not care, but as an FYI that can be used to fingerprint your browser more accurately. And if you are a developer, make sure you correctly test your site on machines that DO NOT have the fonts installed, as the browser won't even try to load them if it already has them, and you'll likely never find any bugs related to that until it's too late.

CoolGuySteve 10y ago

I had the exact same problem in China last month, only worse because I was also going through a crowded VPN. The only page I could reliably load before losing patience was Hacker News. The best workaround I found was to load Opera Mini and crank up the compression proxy. It's annoying though, if Opera Mini can automatically compress the page's imaging and formatting, why can't the web server do the same? We can nag designers/developers all day long about web fonts and whatnot, but at the end of the day, only an automated solution is going to actually get put into regular use.

hpaavola 10y ago

What fonts are available in recent versions of all major operating systems? So what are the "web safe" fonts of 2016?

gkya 10y ago
serif, sans-serif, monospace
Freak_NL 10y ago
There are no more guarantees about which font is installed, although you will probably get a decent match if you use one of the old Microsoft core fonts (Verdana, Times New Roman, etc.). Just don't expect the exact font; often you will get a font that matches the metrics for the one you've chosen as a fall-back for those (once) popular fonts. In any case, you can always safely specify one of these font groups: sans-serif, serif, monospace. These will give you the user's default font for that broad category of typefaces. No guarantees about which font you will get though. If you do want to leverage installed fonts, you can craft a decent so-called font-stack that will cover a lot of fonts typically installed on various OSes. For instance, you might specify: /* Just an example, these do not necessarily match. */ "DejaVu Sans", "Bitstream Vera Sans", "Droid Sans", Verdana, sans-serif; Again, no guarantees, that is why we have web-fonts. Also, I am probably missing something, but don't you just get the fall-back font (e.g., whatever matches sans-serif) with a web-font as long as you specify one? Isn't that common CSS knowledge among developers?
- angry-hacker 10y ago
  You do get fallback but might experience FOIT and other nasty things.
PuffinBlue 10y ago
These two posts were useful to me: https://mondaybynoon.com/linux-font-equivalents-to-popular-web-typefaces/ https://mondaybynoon.com/linux-font-equivalents-to-popular-w... http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html I used them when sorting the fonts for my site as I wasn't happy with the web font performance and switched to 'web safe'. There are some good comparisons there. You can see my choice in action here: https://josharcher.uk https://josharcher.uk

iamandoni 10y ago

That invisible ink at the top is a good subtle touch.

innocenat 10y ago

One thing this completely missed are non-Latin script. For example, the default Thai font on Windows is just plain ugly.

mhd 10y ago

I despise icon fonts with a raging passion. It feels like we're back in 8 bit time where we're using sprites for things that Man Wasn't Meant To Do with them. Web fonts as real world fonts are kinda-sorta okay. Although it's yet another area where "All the world's a VAX" can proliferate, when designers think everyone's got the Windows font engine or their MacBook/iPhone's Hippidippi display.

deleted 10y ago
[deleted]

niftich 10y ago

The gripes are valid and some of the links about fixing it are good content. I'm starting to sound old, but "back in my day" people would use the 'media' parameter in link tags to load mobile-specific stylesheets. Has this practice died out? If so, why?

angry-hacker 10y ago
You can do it but designers want consistency on every device pixel perfect bla bla. All major OS providers should included in all the Google fonts by default and we can move on with our lives.

JepZ 10y ago

If she cares so much about the experience, why does she use an iphone after all?!?

jaredcwhite 10y ago

Yes, web fonts often suck on slow connections. Meanwhile, on fast-ish connections, I find the FOUC effect to be greatly annoying. That 1-2 seconds of seeing Times and Helvetica and then seeing Freight Text Pro and Proxima Nova drives me bonkers. I think there must be some kind of happy medium between FOUC for faster connections and rage-inducing FOIC for slow connections. Unfortunately, most devs (and sadly I claim to be one) don't test their sites frequently on a range of connection speeds so it's common to have badly-tuned font dynamics on sites. Bottom line: as someone who cares about design and visual experiences, I don't think the answer is just accept and live with FOUC everywhere. Browsers and dev tooling both need to improve in order to find that happy medium.

adambrenecki 10y ago
I think the Chrome behaviour (display invisible content for a while, then after a timeout render using fallback fonts) would be a happy compromise were the timeout not three whole seconds. font-display: optional and font-display: fallback (as linked in the article) look like promising solutions to the problem (both recommend a FOIC aka 'block period' of 100ms), but it'd be even nicer to set the exact duration of the block and swap periods in CSS.

initram 10y ago

I find web fonts so annoying, along with images that don't load until you scroll to them. I usually read in Reader mode, and it takes the loaded page and re-renders it without web fonts in a normal style. But when the site doesn't load all the images, I end up missing half the article because I can't see what they're talking about. So annoying.

NumberCruncher 10y ago

Tl;dr: if you are travelling in a foreign country and you think about whatever fonts... girl, you are doing it totally wrong. Buy a city guide, printed on good old fashioned paper, even if it is so 1990, and get a fuck off-line! Or just talk to the natives! In person!

jamra 10y ago
I think you are a bit off with your comment. Having a web connection makes traveling much nicer. The authors mistake was not pre purchasing a data sim with a fast connection. Amateur traveler complaining about nonsense
- NumberCruncher 10y ago
  The next time I pick up a chick I chatted up on a trip and I can't find back to my b'n'b because we both are so wasted and I don't have internet connection to use google maps I hope you will be there. At first to be able to use your 4G phone and at second to prove you how wrong you are.
  - deleted 10y ago
    [deleted]
  - jamra 10y ago
    Did you read my comment? Get a data plan before you travel and you'll be slow internet proof.
  - jamra 10y ago
    Did you read my comment? Get a data plan before you travel and you'll be slow internet proof.
    - NumberCruncher 10y ago
      Did you read my comment? I do not want to be [paste an "indispensable" first world service] proof if I am in a foreign country because it kills the advanture and makes me thinking about fonts and cats.

metafunctor 10y ago

The HN crowd frequently compliments Stripe on their good looking, functional, well designed web pages. The Stripe home page is 75% web fonts (432k).

syrrim 10y ago
To be fair, 500k, at least compared to some webpages, is actually a fairly small size. This isn't really a case where a percent of the total is useful.

ivanhoe 10y ago

Problem is that lazy loading will introduce a flicker on fast connections or if the font is already in browser's cache since re-rendering of the page takes some amount of time (more content, slower it will be). And if you have multiple pages, this means this will affect even people on slow connections on every page except the first one. So it's not a win-win solution, one side will have more or less degraded experience.

makecheck 10y ago

Are web fonts smart enough to download only the symbols that you’re using? With Unicode growing all the time, and fonts supporting significant parts of that total set, it would be insane to have to download hundreds of thousands of symbols when you’re just trying to write a 3-word headline. Another problem is aggressive filtering, oddly. I once visited China and found my entire web site wouldn’t load; it turned out to be triggered by a font from a Google domain. How silly for content to be thrown out because an optional style element is unavailable. I have since stripped out all my Google dependencies.

kowdermeister 10y ago
For icon fonts you can use this great service to generate only what you need from various icon fonts: http://fontastic.me/ http://fontastic.me/
Raticide 10y ago
Nope, I don't think so. It would be hard to pull off as you might be using the font on an <input> and the user could type any character. Or you could be pulling text in through an XHR and won't know in advance what characters will be returned.

kutkloon7 10y ago

I absolutely do not understand the need for 'web fonts'. Just specify a normal font that most users already have installed in CSS, with some fallbacks. 'Progressive styling' is way more annoying (in my humble opinion) than waiting some time. Pages like the verge can take minutes anyway, when the wifi is not optimal. When you do things progressively, the page just keeps on changing, and the page can't really be used. So if you have a long page with text, and the user is somewhere halfway, the font loads and... BOOM! You are reading text that is located 8 paragraphs from where you were reading one instant ago. This is far more annoying with images which dont specify their size, but I would still consider it bad practice to use an uncommon font for non-artistic pages.

Kalium 10y ago
> I absolutely do not understand the need for 'web fonts'. Just specify a normal font that most users already have installed in CSS, with some fallbacks. Imagine you're a company whose business operates exclusively through your website. Imagine further that your company is the sort for whom design is critical because it drives your business. You are going to insist on making sure everything looks perfect in every scenario. You can think of it as design control-freakery. Typography really matters to some people.
- HelloNurse 10y ago
  "The sort of company for whom design is critical" doesn't coincide at all with the sort of company for whose website a pixel-perfect layout makes sense. Why would expert designers show off bad typography instead of good, and in the website rather than in products? This "design control-freakery" proves that someone doesn't master simple and proven web technology. Why would you trust them with something technically complex like faithful color printing or something "artistic" like designing a logo?
mcbits 10y ago
The shifting page layout is a symptom of a broader problem, in that it's impossible to accurately predict or specify the rendered dimensions of text. Even measuring a container after the fact is unreliable because of the arbitrary amount of whitespace in different fonts. You'd have to generate a bitmap image and detect a bounding box around the pixels, which definitely won't help with loading times. This can't be done at development time because different browsers and system configurations all render the same fonts slightly differently. So, even sticking with system fonts to avoid this one symptom, we have this giant elephant in the room making it difficult to ensure anything but the most primitive layouts will be legible across devices.

incompatible 10y ago

I got a message from my provider to say they are closing down their 2G network next year since hardly anyone uses it and they want to reuse the bandwidth for something else. Maybe this protocol will die out soon.

tribby 10y ago

it's easy enough to edit web fonts to include only necessary characters, but most EULAs won't allow for this. any font licensed under the SIL open font license is fine, though you may have to change the font's name if it has a reserved font name (check the license file). this makes a huge difference (fonts under 10k), but no one ever bothers to do it. not sure if inlining them as base64 in your CSS and serving with gzip would help much more. a lot of the stuff that we do in font editors is going to start happening in-browser. variable fonts that use two masters (the thinnest and heaviest font weights) to interpolate all the other weights in-browser are an emerging standard that will get font sizes down[0]. you're essentially being sent two fonts over the wire that can generate quite a few more. font files are bloated in a number of ways. eventually we'll have a standard where diacritics like ¨´ etc can automatically be added to letters without the need for an entirely separate glyph. (å,a,á,ä, are currently separate, which is very expensive). google, adobe, and other big players are hard at work on this stuff, and it won't be long. there are pain points now, for sure, but to me this isn't an argument in favor of system fonts. most of web design is typography design, and anyone who says otherwise probably hasn't been designing for the web very long. 0. http://blog.typekit.com/2016/09/14/variable-fonts-a-new-kind-of-font-for-flexible-design/ http://blog.typekit.com/2016/09/14/variable-fonts-a-new-kind...

codedokode 10y ago

I think the easiest solution would be just not to use web fonts at all. Do you need fancy fonts on a website with technical documentation? I think you don't but sadly PHP developers added a whole megabyte of fonts to PHP manual. As a result one has to wait until the fonts are loaded to see the text. And web fonts are often poorly rendered on Windows. I want an option in Chromium that would allow disabling web fonts by default and enabling them on a per-site basis (like it has an option for disabling JS). And what surprises me most is that mobile browsers (which are often used on slow and metered connections) do not have such options at all. I remember old Opera browser that is now long gone had a lot of options to make user experience better on poor connections (and a builtin domain block list). Well, at those times internet users had higher average IQ and now typical Internet user would not even understand what is the meaning of "disable JS".

stomato 10y ago
> I think the easiest solution would be just not to use web fonts at all. Here's another option: plain text. That's right. You can have webpages that are plain text without any HTML formatting, and they will render. Here is an example file: This is text. This is the absolute best way of presenting web content. No one will complain.
- codedokode 10y ago
  The difference between web fonts and HTML/CSS is that HTML loads progressively and markup doesn't weight more than all other resources. So I am ok with both plain text and HTML pages but not ok with fonts until browser vendors make a better implementation and make them optional.
- wingerlang 10y ago
  > This is the absolute best way of presenting web content. No one will complain. Not sure if this is a joke or not, most people would complain.
mos_basik 10y ago
>I want an option in Chromium that would allow disabling web fonts by default and enabling them on a per-site basis. It's not a native solution, but apparently the extension uBlock Origin has a setting to block web fonts (people have mentioned it in this thread). I use uBlock Origin as my adblocker, and it is a much better experience in terms of performance and usability than AdBlock ever was - so I wouldn't be surprised if the font option was equally well implemented. On mobile currently, but will try it out when I get to my computer. As for toggling, there is a nice simple button that enables/disables the adblocking on the active site. I'm hoping it affects the font setting too. PS: that's uBlock Origin, not just uBlock.

okonomiyaki3000 10y ago

As she's in Taiwan, she might have mentioned that webfonts, despite any pros and cons they have for western language sites, will never (never say "never"...) be useful for Chinese or Japanese sites. A bit off the topic of the article but maybe adds some perspective. Or not.

niftylettuce 10y ago

For web fonts in emails, look no further than my latest package `custom-fonts-in-emails` for Node.js. https://github.com/crocodilejs/custom-fonts-in-emails#custom-fonts-in-emails https://github.com/crocodilejs/custom-fonts-in-emails#custom...

timboslice 10y ago
pretty cool. love the fast-levenshtein addition - can't tell you how many times user error has killed me (used the wrong extension or missed a letter)

frivoal 10y ago

I blame the browsers. There's no deep reason you have to introduce a piece of javascript to hide stuff from the browser so that it can load the page normally, and then add back the fonts. If browsers cared about making the web usable for everybody more than they cared about making web page look like slick native apps, they'd do it for you. The way browser internals work is already designed for that. if the network is slow and you get only half the html, half the css, miss some images, or whatever, the browser will render as best as it can with what it got so far, and re-render when it gets the rest. The fact that it doesn't do that with fonts sucks.

daodedickinson 10y ago

Ehhh. Slowness has its benefits. But you need to know the fallout that will result.

Crenchaw 10y ago

Custom fonts and web fonts are fine... if they are stored on the same web server, so they load with the document. Images are fine... if you specify the width and height so the page doesn't jump around while the page loads. Menus and top bars that change when you scroll down are never acceptable. It's distracting and unnecessary. Goofy background and image effects in general are very annoying if they are synced with page scrolling. It reminds me of a child's pop-up book.

lacampbell 10y ago

Off topic, but the first paragraph mentioned using 2G mobile internet in Taiwan... why!? 4G is cheap and plentiful there. https://guidetotaipei.com/article/cell-phones-and-sim-cards https://guidetotaipei.com/article/cell-phones-and-sim-cards ($100 TW = $3.18 US)

scott_karana 10y ago
I was curious about that too... Are there any rural or wilderness areas where the quality would downgrade, maybe?
notwaldorf 10y ago
I was roaming! T-mobile gives me free 2G when roaming, and I don't like temporary SIM cards because nobody knows how to call me if there's an emergency :(

williamsharkey 10y ago

I wish that system fonts could be told the size of the characters of a web font upfront, before the web font was loaded. The system font's glyphs should smoothly fade/morph into the target webfont once it is loaded. To solve the problem generally would be difficult or equivalent to the effort/data required to download the web font in the first place, but there may be a quick and dirty solution that covers 99% of text in the wild. The easiest case is monos paced fonts. Is there really an excuse why the system font can't be told via Css what spacing/height to use to match the target webfont?

williamsharkey 10y ago
To be more explicit, it is insane that we find it acceptable for text to reflow/ break over lines at different points once the web font is loaded. There is something that bugs me -- On the one hand we are being considerate and trying to make the reading experience pleasant. On the other hand we are being careless creators of jank. Maybe jank is something that primarily irritates nerds and I am overreacting.

deleted 10y ago

[deleted]

DocTomoe 10y ago

> awesome free roaming 2G So instead of fixing the real problem - which is obviously connectivity - we need to break the web and add another layer of Javascript complexity to something that works perfectly fine without. It's 2016. 2G is 25 years old (started in 1991!). Stop being cheap. Stop working with 2G.

moonbug 10y ago
There is life beyond SV, and not all of it has your infrastructure.
bakli 10y ago
I think you're used to the developed world. Here in India, most of the places (except big cities) only get 2G. 3G towers are being laid and will probably be operational in 2-3 years.

rcarmo 10y ago

I just gave up on web fonts and go with Georgia, Arial and a sensible set of fallbacks (although I try Menlo instead of Courier first, because it's ugly in retina)

b1daly 10y ago

I'm mystified by how many major sites have terrible usability issues on mobile devices that are used widely. (older iDevices cheap-mid level Android phones). Are the proprietors of these sites, which live and die on their traffic, actually unaware of how bad the experience is? Or are the proprietors oblivious because they always have the latest iPhone or Galaxy? Are the developers oblivious too, or are they keeping their bosses in the dark? Or are the business requirements for the sight so absolutely needed, and it is simply hard to make it work? Anyone able to venture a perspective on this?

jonatron 10y ago
>Are the proprietors oblivious because they always have the latest iPhone or Galaxy? Probably. They can say "I've checked it on mobile".

mrec 10y ago

I had a very strong impression that the quality of Web typography took a colossal nosedive when web fonts became a thing. My suspicion at the time was that this was largely a result of designers pushing pet fonts that looked fine on their Mac but like crap on other OSes (due to different rendering/hinting algos); can't prove that, though. I did try disabling web fonts in Firefox, but then that semi-broke sites like GitHub who seemed to think that using them to display UI button images was a good idea. This is why we can't have nice things. And why designers are sometimes held in less esteem than they might like.

jacobmischka 10y ago

Really love the title, nice article.