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) instead of web fonts. Seems more in-line with the spirit of the web and these fonts are very well tested in general.
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.
Have none of you ever worked for a designer or marketing person who was unwilling to accept that a bit of text might wrap on Windows (Arial), but fit on one line on a Mac (Helvetica)?
Until we can get the major operating systems to include some of the most popular open-source fonts, we're stuck with web fonts.
If macOS, Windows, Debian, iOS, and Android all came with Roboto, Source Sans, Lato, Merriweather, Raleway, etc. pre-installed, then we could make the case that if we used those fonts instead of non-free ones we would have consistency across all platforms and better performance for our users.
Since I doubt that day will ever come, we instead need to weigh an inconsistent appearance against a poor experience for those on slow connections. Different organizations will choose to prioritize different things, and that's ok.
A significant portion of marketers and designers will always demand pixel perfection for their websites. I'm just glad we're not putting text inside of images any more.
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
> 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. :)
Yes! Why should a web site specify fonts at all? The user should set their browser to a default that they like and most sites should be happy with that. People just use web fonts because they can. If there's a particular reason you need to override the users preference then fine.
I keep external fonts disabled on my laptop with Firefox. Under Preferences > Content > Advanced, uncheck "Allow Pages to User Their Own Fonts", and it makes the web seemingly twice as fast.
Why can't we share fonts between websites? I.e., put fonts on some shared CDN, and link to them directly. It could be similar to how different programs share code through shared-object files :)
A similar effect will probably be achieved with IPFS, where objects are stored by their hashes.
I have this exact issue with web fonts. One neat trick I discovered on slow/flaky connections (think train passing through countryside) is that you can read the page quickly by going into iOS Safari's Reader View. It's a bit hit-and-miss though.
As a web author though, a big problem I have is that Android's default font set is pretty ugly, which is a big reason site owners want web fonts in the first place. Both Windows and macOS have a decent bundle of fonts. Android has Roboto, but using just Roboto for everything is a drag. And I'm not aware of any good serif font bundled with Android.
EDIT - for some of my sites I've set up the stylesheet so that iOS and Mac/Win get system fonts. Android and Desktop Linux get web fonts.
Is it me or did that medium article make a big stink about using system fonts, but it sits on a page that has a font specified as medium-content-sans-serif-font which isn't even a URL-ed font. It is base-64-ed into the css file so the font is not even cacheable across sites if other people bothered to use it.
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.
Nice. I was only familiar with the original one; I wasn't aware that there were more. It appears to be the most recent one? I was hoping to find a comprehensive list of this kind of site somewhere but didn't. I did find these by following some breadcrumbs:
I don't think #3 is a particularly strong example, though. I don't think it looks bad - In fact I think it looks good; my personal site uses monospace fonts - but I think it adds too much to make its point effectively.
#4's criticism of #3 is spot on, and its mention of Let's Encrypt, gzip and caching make it my new favorite. Thanks!
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 :)
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.
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.
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.
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.
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.
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.
> 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
[+] [-] mouzogu|9 years ago|reply
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) instead of web fonts. Seems more in-line with the spirit of the web and these fonts are very well tested in general.
[+] [-] Declanomous|9 years ago|reply
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.
[+] [-] esonderegger|9 years ago|reply
Until we can get the major operating systems to include some of the most popular open-source fonts, we're stuck with web fonts.
If macOS, Windows, Debian, iOS, and Android all came with Roboto, Source Sans, Lato, Merriweather, Raleway, etc. pre-installed, then we could make the case that if we used those fonts instead of non-free ones we would have consistency across all platforms and better performance for our users.
Since I doubt that day will ever come, we instead need to weigh an inconsistent appearance against a poor experience for those on slow connections. Different organizations will choose to prioritize different things, and that's ok.
A significant portion of marketers and designers will always demand pixel perfection for their websites. I'm just glad we're not putting text inside of images any more.
[+] [-] et-al|9 years ago|reply
> 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. :)
[+] [-] alanh|9 years ago|reply
A quote I like on designers avoiding the actual experiences they create: https://wellfuckingsaid.com/2016/on-designers-ignoring-those...
A thing I wrote urging you to test your own work in simulated slow network conditions: https://alanhogan.com/slow-it-down-gain-empathy
[+] [-] phkahler|9 years ago|reply
Yes! Why should a web site specify fonts at all? The user should set their browser to a default that they like and most sites should be happy with that. People just use web fonts because they can. If there's a particular reason you need to override the users preference then fine.
[+] [-] adrianN|9 years ago|reply
Yay, more bits for fingerprinting!
[+] [-] vortico|9 years ago|reply
[+] [-] amelius|9 years ago|reply
A similar effect will probably be achieved with IPFS, where objects are stored by their hashes.
[+] [-] captn3m0|9 years ago|reply
Source: https://github.com/captn3m0/disable-web-fonts
Helped me save lots of bandwidth.
[+] [-] signal11|9 years ago|reply
As a web author though, a big problem I have is that Android's default font set is pretty ugly, which is a big reason site owners want web fonts in the first place. Both Windows and macOS have a decent bundle of fonts. Android has Roboto, but using just Roboto for everything is a drag. And I'm not aware of any good serif font bundled with Android.
EDIT - for some of my sites I've set up the stylesheet so that iOS and Mac/Win get system fonts. Android and Desktop Linux get web fonts.
[+] [-] dexterdog|9 years ago|reply
[+] [-] theandrewbailey|9 years ago|reply
A fast connection can be faster than the site's capacity to serve resources to you. See also HN hug of death, etc.
I would like to think that the <script> defer attribute is already conditional, since it's almost instant on sufficiently fast connections.
[+] [-] unknown|9 years ago|reply
[deleted]
[+] [-] prodigal_erik|9 years ago|reply
I can't help but think of Android's "battery saver" toggle, which leaves me wondering why there's a battery waster feature and why it's on by default.
[+] [-] discreditable|9 years ago|reply
To put it more bluntly: https://bestmotherfucking.website/#remote-fonts
[+] [-] mos_basik|9 years ago|reply
Nice. I was only familiar with the original one; I wasn't aware that there were more. It appears to be the most recent one? I was hoping to find a comprehensive list of this kind of site somewhere but didn't. I did find these by following some breadcrumbs:
I don't think #3 is a particularly strong example, though. I don't think it looks bad - In fact I think it looks good; my personal site uses monospace fonts - but I think it adds too much to make its point effectively.#4's criticism of #3 is spot on, and its mention of Let's Encrypt, gzip and caching make it my new favorite. Thanks!
[+] [-] BinaryIdiot|9 years ago|reply
But if you want to use them make them optional like this site explains :)
[+] [-] acdha|9 years ago|reply
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.
[+] [-] jaredcwhite|9 years ago|reply
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|9 years ago|reply
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.
[+] [-] metafunctor|9 years ago|reply
[+] [-] syrrim|9 years ago|reply
[+] [-] tvon|9 years ago|reply
It's annoying enough to warrant using Stylish to override the web font.
[+] [-] BinaryIdiot|9 years ago|reply
[+] [-] joshdotsmith|9 years ago|reply
[+] [-] WorldMaker|9 years ago|reply
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.
[+] [-] Klathmon|9 years ago|reply
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.
[+] [-] creshal|9 years ago|reply
Arch Linux has a surprisingly popular (top 50) AUR pkgbuild for it: https://aur.archlinux.org/packages/ttf-google-fonts-git/
[+] [-] jajern|9 years ago|reply
[+] [-] mslev|9 years ago|reply
[+] [-] cs2818|9 years ago|reply
[+] [-] dochtman|9 years ago|reply
[+] [-] Spartan-S63|9 years ago|reply
I love that show.
[+] [-] rndmize|9 years ago|reply
[+] [-] drinchev|9 years ago|reply
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.
[+] [-] elcapitan|9 years ago|reply
[+] [-] makecheck|9 years ago|reply
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.
[+] [-] Raticide|9 years ago|reply
[+] [-] kowdermeister|9 years ago|reply
http://fontastic.me/
[+] [-] niftylettuce|9 years ago|reply
https://github.com/crocodilejs/custom-fonts-in-emails#custom...
[+] [-] wickedlogic|9 years ago|reply
[+] [-] symlinkk|9 years ago|reply
[+] [-] Animats|9 years ago|reply
[+] [-] initram|9 years ago|reply
[+] [-] skizm|9 years ago|reply
[+] [-] frivoal|9 years ago|reply
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.
[+] [-] draw_down|9 years ago|reply
(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.
[+] [-] mhd|9 years ago|reply
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.
[+] [-] forrestthewoods|9 years ago|reply
Relevant: Page Weight Matters (2012) http://blog.chriszacharias.com/page-weight-matters