25 ms·

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'

by 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.
- smacktoward 10y ago
  > I know your fonts are a deliberate design choice, but I'm here for content. Categorizing type as "a design choice" dismisses it as fashion rather than function, which I don't think is the case. Type can put fashion over function, but it can also enhance function by making text more readable, or perform a mix of both functions by expressing a point visually that reinforces the point the page is making textually. It is possible to remove meaning from a document by stripping away design. > 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 Responsive design and web fonts are different issues; you can use Web fonts on a page without any responsive design elements, and vice versa. > 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. This is a real problem, but it has much less to do with either responsive design or Web fonts than with the absolute crap-ton of JavaScript sites lard themselves down with these days to do things like load ads (which is what causes all that jumping around, as slow-loading ad units pop into place and the document has to re-flow everything else to accommodate them). Try turning JavaScript off in your browser some time and you will see this immediately. Here's an example: I was just on Rotten Tomatoes (which uses Web fonts), and was getting annoyed by precisely the kind of spastic layout you rightly decry. As an experiment, I tried loading the home page from a cold cache with JavaScript on, and then again with it off. With scripts on, it took more than 12 seconds for the page to finish loading. Without scripts: under 1 second.
  - lomnakkus 10y ago
    > Categorizing type as "a design choice" dismisses it as fashion rather than function, which I don't think is the case. I think it's a question of how often it's one vs. the other. There are precious few good examples of web font usage -- so few, in fact, that I can't even think of one off the top of my head. > Type can put fashion over function, but it can also enhance function by making text more readable, How so? I mean, I've literally chosen my system fonts based on readability (to me, on my screen, with my eyesight, with my lighting conditions, etc!). I'm also used to those fonts. > [...] by expressing a point visually that reinforces the point the page is making textually Do you have any good examples of this? I don't think I've ever seen it "in the wild", so to speak. Disclosure: I'm so annoyed by web fonts that I use a browser plugin which actually overrides fonts chosen by web pages, so I may not have been experiencing a representative sample of "what's out there". I had to have a quick-toggle for that plugin because suddenly it became fashionable to use goddamn fonts for icons. Ugh. Don't get me started :).
prodigal_erik 10y ago
> Would love an attribute on script and link tags that could be conditional based on connection speeds. 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.
- firasd 10y ago
  Sometimes you want the richer resources though if you're on a better connection or the resources are cached rather than this being the first page load. In my view we definitely need a "lazyload" attribute for script, link, and img elements. I go into more detail about lazy loading for web fonts and images (and how I found that even resources in <body> can slow down stylesheets in <head>) here: https://hackernoon.com/dont-brake-for-fonts-3-web-performance-techniques-to-show-content-quickly-fdefcd0d2028 https://hackernoon.com/dont-brake-for-fonts-3-web-performanc...
- Spivak 10y ago
  Same with the "data saver" toggle, I turned it on when I first got my phone and haven't turned it off since.
  - callalex 10y ago
    That's different though. The tradeoff there is proxying all your internet traffic through Google servers.
- icebraining 10y ago
  The opposite of saving is not wasting, it's spending. It's only a waste if you spend it badly.
  - Spivak 10y ago
    Sure, but if they made 'battery saver' the default and gave you a 'power boost' toggle would you even notice? When would you turn it on?
deleted 10y ago
[deleted]
theandrewbailey 10y ago
> Would love an attribute on script and link tags that could be conditional based on connection speeds. 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.
esonderegger 10y ago
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.
- jimktrains2 10y ago
  > 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. This really seems to be a problem with marketing and design people; we're not stuck with webfonts. We're stuck with unreasonable people.
  - esonderegger 10y ago
    I tend to agree with you, but I think it's important to constantly be trying to understand where other people are coming from. They might not be so unreasonable; they just have different priorities than we do. Our idea of what a webpage is might be a text document where the presentation is less important than the content. To others, the presentation IS the content. For some people, it might depend on what message the page is trying to convey.
    - alanh 10y ago
      Where you are wrong, I think, is that “the presentation IS the content” is a common belief among “designers” but almost never the belief of users.
captn3m0 10y ago
I was using a metered connection a few years back and made this plugin to disable all web-fonts: https://chrome.google.com/webstore/detail/disable-web-fonts/olmabeadgbpmhllgdkemfdnmkngkbkeg https://chrome.google.com/webstore/detail/disable-web-fonts/... Source: https://github.com/captn3m0/disable-web-fonts https://github.com/captn3m0/disable-web-fonts Helped me save lots of bandwidth.
phkahler 10y ago
>> they've come to symbolise over-indulgence 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.
- paulddraper 10y ago
  Usually, it's done for consistent layout. (Many people in this thread have said they do not value consistent layout. Nor do I, but that is the usual reason.)
  - phkahler 10y ago
    The whole point of HTML was that the layout was done by the browser to fit the users screen. If your site is fixed width, you're doing it wrong. And I realize that a lot of places are doing it wrong.
    - paulddraper 10y ago
      Yes, that is historically true. Less so nowadays, where HTML is used for layouts closer to say, PDFs.
- matt4077 10y ago
  And why should anyone be allowed to set colors, or sizes, or shapes? Why don't we use .txt as the format for the web? Because design happens to be one avenue of human expression. If you keep denying that, or label users enjoying it as superficial, you'll end up with something like North Korea, where everyone gets to choose from two approved hairstyles, walks around in "male shoe" or "female shoe" and goes home to eat soylent.
  - callalex 10y ago
    System fonts are literally hitler
adrianN 10y ago
> Would love an attribute on script and link tags that could be conditional based on connection speeds. Yay, more bits for fingerprinting!
vortico 10y ago
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.
- creshal 10y ago
  The downside is that it breaks all the websites using icon fonts.
alanh 10y ago
Myopia is a good word for it. A quote I like on designers avoiding the actual experiences they create: https://wellfuckingsaid.com/2016/on-designers-ignoring-those-for-whom-they-design 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 https://alanhogan.com/slow-it-down-gain-empathy
signal11 10y ago
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.
amelius 10y ago
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.
- colejohnson66 10y ago
  It's called Google Webfonts https://fonts.google.com/ https://fonts.google.com/
dexterdog 10y ago
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.
- colejohnson66 10y ago
  Probably because the web designer and post author aren't the same person?

by mouzogu 10y ago

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.

smacktoward 10y ago
> I know your fonts are a deliberate design choice, but I'm here for content. Categorizing type as "a design choice" dismisses it as fashion rather than function, which I don't think is the case. Type can put fashion over function, but it can also enhance function by making text more readable, or perform a mix of both functions by expressing a point visually that reinforces the point the page is making textually. It is possible to remove meaning from a document by stripping away design. > 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 Responsive design and web fonts are different issues; you can use Web fonts on a page without any responsive design elements, and vice versa. > 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. This is a real problem, but it has much less to do with either responsive design or Web fonts than with the absolute crap-ton of JavaScript sites lard themselves down with these days to do things like load ads (which is what causes all that jumping around, as slow-loading ad units pop into place and the document has to re-flow everything else to accommodate them). Try turning JavaScript off in your browser some time and you will see this immediately. Here's an example: I was just on Rotten Tomatoes (which uses Web fonts), and was getting annoyed by precisely the kind of spastic layout you rightly decry. As an experiment, I tried loading the home page from a cold cache with JavaScript on, and then again with it off. With scripts on, it took more than 12 seconds for the page to finish loading. Without scripts: under 1 second.
- lomnakkus 10y ago
  > Categorizing type as "a design choice" dismisses it as fashion rather than function, which I don't think is the case. I think it's a question of how often it's one vs. the other. There are precious few good examples of web font usage -- so few, in fact, that I can't even think of one off the top of my head. > Type can put fashion over function, but it can also enhance function by making text more readable, How so? I mean, I've literally chosen my system fonts based on readability (to me, on my screen, with my eyesight, with my lighting conditions, etc!). I'm also used to those fonts. > [...] by expressing a point visually that reinforces the point the page is making textually Do you have any good examples of this? I don't think I've ever seen it "in the wild", so to speak. Disclosure: I'm so annoyed by web fonts that I use a browser plugin which actually overrides fonts chosen by web pages, so I may not have been experiencing a representative sample of "what's out there". I had to have a quick-toggle for that plugin because suddenly it became fashionable to use goddamn fonts for icons. Ugh. Don't get me started :).

prodigal_erik 10y ago

> Would love an attribute on script and link tags that could be conditional based on connection speeds. 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.

firasd 10y ago
Sometimes you want the richer resources though if you're on a better connection or the resources are cached rather than this being the first page load. In my view we definitely need a "lazyload" attribute for script, link, and img elements. I go into more detail about lazy loading for web fonts and images (and how I found that even resources in <body> can slow down stylesheets in <head>) here: https://hackernoon.com/dont-brake-for-fonts-3-web-performance-techniques-to-show-content-quickly-fdefcd0d2028 https://hackernoon.com/dont-brake-for-fonts-3-web-performanc...
Spivak 10y ago
Same with the "data saver" toggle, I turned it on when I first got my phone and haven't turned it off since.
- callalex 10y ago
  That's different though. The tradeoff there is proxying all your internet traffic through Google servers.
icebraining 10y ago
The opposite of saving is not wasting, it's spending. It's only a waste if you spend it badly.
- Spivak 10y ago
  Sure, but if they made 'battery saver' the default and gave you a 'power boost' toggle would you even notice? When would you turn it on?

deleted 10y ago

[deleted]

theandrewbailey 10y ago

> Would love an attribute on script and link tags that could be conditional based on connection speeds. 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.

esonderegger 10y ago

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.

jimktrains2 10y ago
> 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. This really seems to be a problem with marketing and design people; we're not stuck with webfonts. We're stuck with unreasonable people.
- esonderegger 10y ago
  I tend to agree with you, but I think it's important to constantly be trying to understand where other people are coming from. They might not be so unreasonable; they just have different priorities than we do. Our idea of what a webpage is might be a text document where the presentation is less important than the content. To others, the presentation IS the content. For some people, it might depend on what message the page is trying to convey.
  - alanh 10y ago
    Where you are wrong, I think, is that “the presentation IS the content” is a common belief among “designers” but almost never the belief of users.

captn3m0 10y ago

I was using a metered connection a few years back and made this plugin to disable all web-fonts: https://chrome.google.com/webstore/detail/disable-web-fonts/olmabeadgbpmhllgdkemfdnmkngkbkeg https://chrome.google.com/webstore/detail/disable-web-fonts/... Source: https://github.com/captn3m0/disable-web-fonts https://github.com/captn3m0/disable-web-fonts Helped me save lots of bandwidth.

phkahler 10y ago

>> they've come to symbolise over-indulgence 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.

paulddraper 10y ago
Usually, it's done for consistent layout. (Many people in this thread have said they do not value consistent layout. Nor do I, but that is the usual reason.)
- phkahler 10y ago
  The whole point of HTML was that the layout was done by the browser to fit the users screen. If your site is fixed width, you're doing it wrong. And I realize that a lot of places are doing it wrong.
  - paulddraper 10y ago
    Yes, that is historically true. Less so nowadays, where HTML is used for layouts closer to say, PDFs.
matt4077 10y ago
And why should anyone be allowed to set colors, or sizes, or shapes? Why don't we use .txt as the format for the web? Because design happens to be one avenue of human expression. If you keep denying that, or label users enjoying it as superficial, you'll end up with something like North Korea, where everyone gets to choose from two approved hairstyles, walks around in "male shoe" or "female shoe" and goes home to eat soylent.
- callalex 10y ago
  System fonts are literally hitler

adrianN 10y ago

> Would love an attribute on script and link tags that could be conditional based on connection speeds. Yay, more bits for fingerprinting!

vortico 10y ago

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.

creshal 10y ago
The downside is that it breaks all the websites using icon fonts.

alanh 10y ago

Myopia is a good word for it. A quote I like on designers avoiding the actual experiences they create: https://wellfuckingsaid.com/2016/on-designers-ignoring-those-for-whom-they-design 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 https://alanhogan.com/slow-it-down-gain-empathy

signal11 10y ago

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.

amelius 10y ago

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.

colejohnson66 10y ago
It's called Google Webfonts https://fonts.google.com/ https://fonts.google.com/

dexterdog 10y ago

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.

colejohnson66 10y ago
Probably because the web designer and post author aren't the same person?