Hacker News new | past | comments | ask | show | jobs | submit login
Web fonts, boy, I don't know (meowni.ca)
690 points by guessmyname on Nov 3, 2016 | hide | past | web | favorite | 323 comments



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.


"Let's click on this link... ah, not that link, let's go back. Yes, this link... NO! STOP MOVING!"

This is my #1 complaint about reddit. Not due to fonts; but rather when I load reddit on my phone, a "get the reddit app" banner appears... timed perfectly so that my attempt to view my messages sends me off to the app store.


Heck, this is my #1 complaint of almost anything on a mobile browser. It's easily the worst offender when it comes to mobile in general; I wish browser vendors put a bigger focus on fixing this, somehow.


Didn't this start on the desktop and now because companies think it was successful on desktops, they need to extend it to mobile since they think everyone has 4G service?

I remember when your mobile experience was supposed to be a stripped down faster version of your desktop version. Now, they're both insanely hard to navigate and use.

So much for we dev progression, huh?


I used to get the mobile versions of pages on the desktop. Not because I was on a slow connection, just because the text is the meat for most things on the Internet. Now there's less of a point in doing that.


Google is fixing it, but it's punishing them in search, not Chrome.

http://arstechnica.com/business/2016/08/google-to-punish-sit...


Google also has tech to show these banners but only if you've visited the same site a few times already, and then not every time. (This link talks about web app installs first, then native app installs later)

https://developers.google.com/web/updates/2015/03/increasing...

"The user has visited your site twice over two separate days during the course of two weeks."


Which will lead to the same hack as paywalled news sites, the ads won't load when referred from google meanwhile the rest will suffer.


So users reaching a site through google have a better experience than users accessing it through some other method? This seems like a pretty good thing from Google's perspective...


Absolutely, and further extends their embrace over the web.

I suspect google are probably wary about moves that push themselves much further right now, the last thing they want to do is look like a monopoly.


Sounds like a good reason to build a plugin to always sets the http referrer header to google.com on certain news sites.


Is there any good reason for having the "Referer:" tag at all?


Google itself displays an anoying translate this page popup that obscures content, especially when you are browsing in incognito mode.


Browser vendors against adclicks, mice against cheese, bees against honey, what you gonna do now?


Mice aren't really interested in cheese.


Exactly. They're masters of subtlety, manipulating our species to evolve in just the right way, learn just the right things. We don't experiment on them so much as they experiment on us.

Masters of subtlety...


Mice likes cheese, but only if cheese is good. Most of current cheeses are made from fresh milk, which is not fermented enough to be edible.


Please, describe how this "mouse" consumes anything other than "cheese" for sustenance.


Actually, I think he meant it literally:

http://www.earthkind.com/blog/fact-or-fiction-do-mice-really...


What a great example of really bad webfont. That page almost broke my eyes, when saving island of bold fb comments came to the rescue. People lost in thin-line madness.


I guess my link was more relevant than I thought!


I'm starting to suspect that behavior is intentional. I see this all the time with mobile ads... a site slowly loads as I read content, then an ad pops up right when I try to navigate. Incredibly frustrating.

It's like advertisers want me to install adblock... so I will, I'll root my device and adblock all their bullshit forever.


That's so annoying. Worst thing is that adblocks are not as easily available as in desktops. I'm on windows phone 10, my only browser is Edge, so I'm really fucked.


Set up pihole or similar at home and none of your devices will see ads. It's great fun and makes a nice difference on mobile.


Thanks for the suggestion, but it doesn't seem good for me. Blocking things at DNS level, can be counterproductive. Maybe there's a false positive that's been blocked and it will probably a headache to find it.


I don't think I've ever experienced this. Perhaps the lists I was using were just particularly conservative.


It's pretty easy to whitelist a whole domain... the domains on the lists are pretty comprehensively ad-related. Your call, but it certainly is one solution.


This makes it all the more regrettable that Microsoft buried the competition and you are stuck with Windows forever: http://developers-club.com/posts/104034/


Best suggestion I've seen on this: click events apply to whatever had been in the location ~300ms BEFORE you selected it. Turns out humans can't respond much more quickly than that.

I wish I could credit the source but I don't recall -- HN or Reddit probably.

I'm also still not sure this solves the full problem. On mobile, there's generally the problem that a touch and a drag are two different actions, but they're not clearly distinguished. There's a tremendous amount of ambiguity over just where you can or cannot touch on a given web page to accomplish a click, and increasingly pages have very few "safe" whitespace zones.

Examples coming to mind: Chrome/Android history -- the delete-item 'x' will also open the link in the current browser tab. I've found clearing history to be tedious (there's no way to select multiple items, or a date range, say -- you can only delete items one-at-a-time, and not too fast...). On YouTube/Mobile, the entire panel of a search result is a clickable zone, making scrolling the page without inadvertently opening a video you're not interested in all but impossible.

It's abysmally poor UI/UX in both cases.


I'm convinced this page-jumps-as-you're-about-to-touch is a dark pattern to some clickbait time-waster sites use to get more mobile ad clicks. Just when I'm about to click 'Next' to see the 7th-of-53 stoopid-photos-taken-at-Walmart an ad link jumps to be right under my finger.


You gotta stop going to those sites. :)


Firewall them -- on the device or router. It's what all the cool kids are doing these days.


This even happens on Youtube, on a 200 mbit+ connection - I go to a page, and just as I reach over to click a link some stylesheet finally shows up and everything moves up by twenty pixels.


Same thing with the Facebook app; whenever you're searching for something, it shows the result you want, but then like 0.5-1 second later it pops up a different result above it so you tap the wrong thing. Drives me insane.


I get around this by not going to Facebook except when a relative or friend dies or the zombie apocalypse starts.


Ugh, I feel you. I've trained myself not to tap on a result unless I've waited several seconds. Life improved immeasurably.


Member when YouTube used to do that with search results except it was an ad


Why aren't you using Reddit Sync yet? Who uses the mobile site these days anyway?


For me it's about tabs. Can't stand when an app opens a URL in a mini browser inside itself. If it's a web link just open it in the damn browser!


There's an option to open the website in external browser, chrome tab or internal browser. Not only in Reddit Sync (which is great), but in every other Reddit app as well.

Btw, opening the website in the Chrome tab is basically the same (session state, cookies are same) as opening it in Chrome, it's just way faster - specially on RAM challenged devices.


I always set

    browser.display.use_document_fonts = 0
in Firefox.

Surfing the web is a more pleasant experience without WebFonts.


What about icon sets? Never find empty buttons?


My experience has been web designers are strongly in either the "system fonts are an abomination before God" camp, or the "the user picked the system fonts, lets use those." camp. Oddly pulling them from one camp into the other seems very very difficult.


I generally prefer a specific font, but will fallback to sans-serif, serif or monospace depending on what I'm styling... I also tend not to have a bunch of fallthrough fonts... ex: specifying helvetica and/or arial should be an offense punishable by a mild beating.

Another thing I hate is when people don't specify the weight for black/bold fonts... which makes the fallback even more hideous.


What happens when a user makes their system font esoteric-new-age-web-sans-font-#523626263278 and your page and the system itself are using the same font?


Then your page looks like crap - but since it's a guest on the user's system, that's entirely up to them.


Its clearly what they want to use. And with em and rem, vw and vh, a change in font doesn't have to screw up the entire page.

What I used to see in some early 90s sites, and would love to see again, is customisations.

You use the system fonts, your own stylesheets, but have a button that loads and activates a WebFont, changes display colours and the like.

It also means that when JS is disabled, or unavailable for some other reason, you can gracefully fallback to a useable site.


Then the user gets the font she has instructed her system to use, and why the @(*# do you think you know better than her?


Using system fonts becomes a minefield once you realise they tend to be unique to each platform.


Typical users vomit and faint when they see text set in Tahoma that was clearly meant for Helvetica, or when a paragraph is one line taller or shorter than the one and only official layout.

Telepathic sensitivity to designer intent is extremely common! Don't let elastic, robust CSS layout techniques mess with your pixel-perfect templates!


Depends on whether you want to display information or show off design.


> 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.


> 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 :).


You aren't alone and some go even further!

I make my own "enhancement suite" for any website I frequent. I blacklist all Javascript by default and whitelist only Javascript necessary for things to function. I use Greasemonkey to add my own functionality to a page, sometimes blacklisting the "default" functionality and rolling my own code to replace it in a more "me-friendly" way. And finally, Stylish, so that I can completely nuke the site's CSS and roll out my own.

But most users won't go through that. They'll use the default browser font and never change it.

Corporate doesn't want to use Arial on the site, so we have a problem with the browser default. Luckily the designer has threatened to quit before they use Comic Sans. At best, they'll pick a nice legible font and at worst they'll pick something "aesthetic" that may be a pain in the ass to read. Usually you get somewhere in the middle or a (sans-)serif font from Google Fonts.

Once upon a time I could trick corporate into using Helvetica, but it seems to have "fallen out of fashion". They don't actually look at the font, they just know what they "don't want" and what they "don't want" is Arial.


Would it be feasible to have an "enhancement pack" website where less talented people (ie me) could get fixes like this.

I remember doing stuff like this with Proxomitron in the good old days....


>Would it be feasible to have an "enhancement pack" website where less talented people (ie me) could get fixes like this.

Sort of? At least if I'm understanding you properly. :)

It used to be that userscripts.org was a thing. Now I think you need to use a mirror [0]. There is also a subreddit for them [1]. Stylish should have a similar site for themes - although not all userscripts will work properly with Stylish (styles may break functionality that relies on styles being a certain way).

For a few sites, I think people have made "generators" for stylesheets to make it user-friendly to generate your own userstyle. I'm not aware of any offhand though.

It would be nice to have a more "curated" or organized Userscripts site, since not all of them are site-specific.

The two most popular "enhancement suites" are the Youtube Enhancement Suite and the Reddit Enhancement Suite, both of which do countless things and are extremely "heavyweight" in functionality/features. My personal "enhancement suites" are a lot smaller in scale and public usability. :)

[0] https://userscripts-mirror.org/

[1] https://www.reddit.com/r/userscripts/


Greasyfork is the replacement for userscripts https://greasyfork.org/en


Many thanks. Some good pointers there....


What happened to userscripts.org?


I pretty much taught myself CSS fixing fucked-up shit I didn't like on sites I was visiting, through Stylebot and (now) Stylish.

Stylebot is slightly easier to get started with, but Stylish is a better and more powerful tool, also available for Firefox.

I haven't got into JS yet.

Otherwise, installing GS scripts or Stylish themes works.


I'm fond of Verdana, which is what this site is using. Also Trebuchet MS, which has a slightly quirky feel.


For some sites I use a lot I do this as well. Mostly CSS fixes, for example widening GitHub's layout to some 1300px. But also removing annoying "design-crap", substituting fonts etc.


https://www.wired.com is excellent in how they use fonts to subtly indicate importance/recency/category.

Many newspapers use fonts very consciously, which usually has the effect that it doesn't enter the reader's consciousness. It's a subtle cue indicating the brand and the image it wants to project. oCmpare the NYT and the Economist – they aim to reach almost identical populations, but the NYT uses serifs (tradition, dependence, gravity) vs. the Econmist's sans (modern, fast, business).


> https://www.wired.com is excellent in how they use fonts to subtly indicate importance/recency/category.

You call that "subtle"??? There are like 10 different fonts/boldnesses jumping at me at first sight.


What you just described is called fashion.


>> > 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.

Oh come on, the "designer" knows what's best for you. ;-) I was going to make a similar response, but you beat me so sarcasm.


Designers don't typically design for people who change their default fonts because most people don't know how and on some platforms it's not even possible.


Most people don't adjust their system fonts.. then again, most defaults are reasonable.

And to anyone who reads this, for the love of $deity, stop specifying Arial or Helvetica before sans-serif. It's one thing if you want a specific default, but the fallback should be whatever system's sane choice.


> Type can put fashion over function, but it can also enhance function by making text more readable

I'm sympathetic to that, but is there really no system font that is sufficiently readable?


The default system fonts are more than good enough for just about any webpage. If Aerial were the only font web browsers were allowed to display, the world would go on just as productively, aside from some designers who conditioned themselves to believe they don't like looking at it getting upset.


You can async your fonts and fallback. The jumping issue still remains. You can have similar line height and font word / letter width to jump less.

Mozilla has something called font height (?) that should help too. But it's Mozilla only.

The jumping task is for browser vendors to fix. Chrome already has an experimental flag to remember position.


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.


This is because a vanishingly small percentage of designers have truly, in their heart, accepted the web as a medium.

They'll sit lovingly with a bunch of dinged up old lead typesetting tools, positively jizz over imperfections in ink distribution, but try to talk to them about system fonts, box models, or free phones and their eyes glaze over and they drift off into their color calibrated RAW dreamland.

In schools they teach people to embrace media but that only applies to fetishized antique media.

They'll use half of the GPU to render CRT glow too, with 8-bit graphics, gush about material metaphors in their visual design, but they won't consider the material properties of the actual distribution medium for their work.

We still haven't seen a true modernist design movement in the digital age. Maybe very briefly for a year or two in the nineties when browsers were good enough to be interesting but not good enough to do anyrhing. It'll come eventually, but it's taking its sweet time.


This is a completely unrealistic view of how designers work.

I've yet to meet a web designer who would have the first clue what to do with hot metal. There are some old guys who remember physical typesetting for print, but design has been primarily electronic for around twenty years now.

The history of the web started after most print had already moved to digital fonts and layout with Pagemaker, then Quark Xpress.

It's one of the tragedies of browser development that it took the web 15 years to start to catch up with industry standard page layout possibilities, and another 5 years to start dealing with fonts intelligently.

And the web - frankly - still sucks for this kind of work. It's not that responsive design is harder than print, it's more that from a designer's POV CSS has been a train wreck for most of its history.

I understand some people here want their own font stylings, and that's fine. But designers use fonts for a reason, and "Not invented here because I don't like this" isn't a good enough reason to make it impossible for them to do that.


That's exactly my point. You are unwilling to accept the properties of your medium. You just say "it sucks" and fight with it. You're like an acrylic painter who complains that oil dries slowly and keeps designing for acrylics, and everything comes out smudgy.


Web fonts are a part of the web, so it kind of sounds like you're the one refusing to accept the properties of the medium.


Web fonts are a poorly performing part of the web.


> This is because a vanishingly small percentage of designers have truly, in their heart, accepted the web as a medium.

That seems a bit harsh. If anything, I feel like the old static print mindset is on its way out and designers have been leaning towards the web as a medium with dynamic layouts. Speakers[0] at An Event Apart spoke of the web as a fluid continuum, so even the idea of designing for only mobile and desktop is insufficient these days (especially with all the varying device sizes).

If you're working with any designer that still expects pixel perfection, I'd suggest that they attend An Event Apart conference, or at least read a few articles on A List Apart.

[0] http://alistapart.com/article/responsive-web-design


"I feel like the old static print mindset is on its way out and designers have been leaning towards the web as a medium with dynamic layouts."

I want to believe you, but I feel like the sheer number of designers who whine about GIMP's lack of CMYK support in their justifications for using Photoshop instead (nevermind that pretty much all modern display technology is RGB-centric) suggests otherwise.

I can understand thinking in a CMYK mindset and not wanting to have to think about RGB, but that nonetheless suggests an unwillingness to change one's mindset to adapt to current media.


Still doesn't solve the bigger problem - that neither designers nor publishers actually embraced the digital medium. They've been treating the web as if it was a poster - something for the designers to show off on. The only thing the current "responsive design" fad brought up is that the poster now changes its layout with size in a somewhat intelligent manner. But they're still drawing posters. We're still getting only text + pictures + occasional video. What about interactive descriptions? Embedded simulations? Models that we can explore, or play with? Nowhere to be found, except in occasional essay by Bret Victor.


That's because up until recently, the only tools users have to interact have been 2D. If 3D becomes a thing, more designers will embrace it and think of new ways to communicate ideas in that space.

Also, in a discussion about communicating efficiently over limited bandwidth, and the possibility removing web fonts, 3D spaces is in a completely opposite direction. We'd have to load vector files and texture maps so that the 3D space doesn't look like crap.

Also, there's a limit to how much input a human can process. There's a reason why certain sites have gotten more simple to restrict distractions.


>We still haven't seen a true modernist design movement in the digital age.

But we have -- unified design guidelines like Metro and Material Design ARE modernist design movements for the era of displays and interactive media. Just because it only applies for an Operating System or an Application doesn't make it any different than using cut-out colors or Gotham in your print ad.


Any recommendations as for investigating your last point? What would constitute a truly modernist design in your view? Good food for thought, thanks.


> 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.


Many people in our profession write code that's less that 80 characters per line because that's how much you could display on terminals in the 70s.

As a profession, we can't complain that someone might be bothered by the idea of word-wrapping.


> Many people in our profession write code that's less that 80 characters per line because that's how much you could display on terminals in the 70s.

It's _also_ a very reasonable & readable amount of text in a row. There's nothing wrong with that.


Not only is 80char more readable, as a sibling comment said, but it also allows addition pieces of code to be displayed side-by-side on a laptop screen.

To be fair, 120char wide code is also not too bad for this purpose and readability.


> It's _also_ a very reasonable & readable amount of text in a row

Presumably, that's why they used 80 characters in the first place, as anything more is too hard to read.


132 column displays were common by the end of the 1970s.

80 column displays date back to the early 1970s.

I started coding on an 80 column display, and I have no doubt at all that a modern 16:9 monitor that can display a double page PDF or a web page with a variety of fonts is a much better display device.


It was 80 columns to match a punch card, AIUI, not a decision on readability grounds at all.


And why was a punch card 80 columns?


It sounds like that was the limit they could fit in the available space given the technology (earlier versions had fewer columns, the "upgrade" to 80 was based on using new narrower holes) - the width was set by wanting to match existing infrastructure for money.


Isn't it more so it is readable inside a phone display to an ssh session as well as a fat 4K screen? That's my reason at least. Can always scale up something, but line breaks I didn't make myself make me want to commit unspeakable atrocities in the name of a demonic deity taking the earthly form of a little girl. Or, you know, angry.


I'm one of those people, though my reason is more so that I can fit more code windows side-by-side (especially on a system with a tiling window manager, like the laptop on which I'm typing this comment) and not have to deal with horizontal scrolling or weird word wrapping that's out of my control.

It also helps to keep my code readable; the shorter the line, the quicker I can work out what exactly that line happens to do. In the vast majority of cases, an inability to keep a line within 72 characters is a line that needs refactored.


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.


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.


That's not really true. They won't consciously believe that, but they won't use the technically superior product, if the competitor has the basics and a better design.


I think that designers are always trying to get the latest, coolest fonts. If you make Roboto and friends part of the OS, then you'll get a new wave of cool new fonts that aren't a part of the OS. There's always a push from people to have their website look special, and, dare I say it, pop.


There are definitely designers who are going for pop by looking for a new font, but I've worked on a lot of projects where the designer just wanted a good, legible, sans-serif that looks the same everywhere.

Who am I kidding, what they want is Helvetica and for the website to look exactly like the comps they made in Photoshop. Sometimes they're willing to find the money for the license fee and sometimes they're willing to accept Source Sans as a substitute. I've never once had them say "the difference between Helvetica and Arial isn't worth the 250ms delay caused by using a web font."


But what about Arial versus Helvetica Neue? /s


Why can't we just deal with the fact that different devices will display your content differently? The world doesn't need better fonts, the world needs better designers.


> 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)?

Yeah, I have. In the 90ies. Saying that it's a reason for any designer of any website that matters today is just trying to set up a strawman.


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. :)


> > 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 ;)


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...

A thing I wrote urging you to test your own work in simulated slow network conditions: https://alanhogan.com/slow-it-down-gain-empathy


>> 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.


> The user should set their browser to a default that they like

If this was actually a decent part of a browser's configuration UI, it might have caught on (or... still might). Give people tools to manage this easily, and they may choose to do it - the 'reader mode' in some browsers shows some people want to get at content regardless of fonts, and giving them easier and more 'up-front' ways of managing this would bring the issue front and center.

Why did we end up with legislation about cookies? I think, in part, it's because it was essentially black magic for years, hidden in layers of nested "advanced" menus, instead of a button right in the damn menu bar saying "clear cookies".

"Why doesn't anyone use personal certificates?!" (I hear from tech colleagues now and then) - because the UI/management for it is horribly useless for 99% of people.

Same with this font stuff. Put "font choice" front and center, as part of browser setup - don't hide it behind layers of "accessibility" stuff. Give people some standard themes they can switch between easily - high contrast, B&W, etc - and have it be something that's a button press away (harder to do on mobile, I'd think).


Because font choice can communicate a lot. Font choice can establish a brand, font choice can create a mood.

Web fonts are better than the stuff people did to do this in the old days. Crazy abominations like siFR [1] or rendering out a gif of your text and using that instead of just delivering some ASCII text that screenreaders can deal with? Web fonts aren't perfect, especially on slow connections, but they're the least horrible solution we have for people who would like to control the finer aesthetic details of how their sites look.

[1] https://mikeindustries.com/blog/sifr


Come to think of it, browsers could have a mode where they use only installed fonts regardless of what a site says. This would be useful to the people on slow connections.


Firefox supports this. In Firefox on Android, it's visible in the settings (under "data saving"). Not sure if it's surfaced in desktop, or only in about:config.


Most browsers support user stylesheets, either built-in (Firefox/Safari) or as an extension, which can accomplish this.


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.


I like my websites with a standard haircut because they load so fast.


System fonts are literally hitler


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.)


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.


Yes, that is historically true.

Less so nowadays, where HTML is used for layouts closer to say, PDFs.


> Would love an attribute on script and link tags that could be conditional based on connection speeds.

Yay, more bits for fingerprinting!


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.


The downside is that it breaks all the websites using icon fonts.


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.


It's called Google Webfonts https://fonts.google.com/


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/...

Source: https://github.com/captn3m0/disable-web-fonts

Helped me save lots of bandwidth.


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.


Probably because the web designer and post author aren't the same person?


> 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.


> 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.


The opposite of saving is not wasting, it's spending. It's only a waste if you spend it badly.


If the battery lasted a week I'd agree with you, but right now my phone happily risks leaving me unable to hail a ride home after happy hour.


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?


The screen would dim more aggressively and location-aware apps would be less accurate. Many users would be annoyed by this, though they might not know it was a result of the battery-saver setting.


If not pressing "power boost" meant that you didn't receive emails without your email app foregrounded, yes you'd notice.


When you turn battery saver on transition animations disappear (making everything feel less reponsive). The phone stops polling for updates as frequently. The screen dims. It's a noticeably worse experience because it does a lot to save battery. When I have plenty of battery or know that I'll be charging my phone soon I would much rather have all of those nice things than not. It's a tradeoff because the circumstances dictate how important saving battery is.


At least my moto g becomes laggy. It's a trade off i guess. With battery saving taking calls is enough but no more.


I think apps would just prompt you with "you need Power Boost mode for optimal experience with this app"


That toggle disconnects the phone from any network, and only reconnects from time to time to update your apps.

You really don't want it on if you expect the phone to tell you when you have a new message.


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-performanc...


Same with the "data saver" toggle, I turned it on when I first got my phone and haven't turned it off since.


That's different though. The tradeoff there is proxying all your internet traffic through Google servers.


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


>that link

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:

  1. http://motherfuckingwebsite.com/ [original]
  2. http://bettermotherfuckingwebsite.com/
  3. http://evenbettermotherfucking.website/
  4. https://bestmotherfucking.website/ [yours]
  5. https://thebestmotherfuckingwebsite.co/ [with extra satire]
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!



Thanks, I really appreciate the positive review!


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.


I'm surprised that browser vendors aren't including the more popular fonts.


A font that supports all Unicode is larger than a browser installer.


Citation? All the DejaVu fonts total about 5 megabytes[0] and they have pretty impressive coverage[1]. What are they missing?

[0]: http://dejavu-fonts.org/wiki/Download [1]: http://dejavu-fonts.org/wiki/PDF_samples


DejaVu fonts are far from covering Unicode. They don't have any Chinese, Japanese or Korean characters, for a starter.


And even worse, you have to download the font every time you load a different page using it, whereas you only have to download the browser once


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.


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.


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


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'm regularly annoyed by the flash when loading the Docker documentation, e.g. http://docs.docker.com/engine/reference/builder/

It's annoying enough to warrant using Stylish to override the web font.


Wow I never noticed that and now I can't unsee it and it's really distracting.


Is this because of the web fonts or because of markdown rendering?


It is the web fonts, if I override 'body' and 'body p' then it loads quickly (the content does anyway, sidebars still flicker).


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.


Those are fair points. Probably my ideal solution would involve an LRU cache (and not installing it on development machines and/or easy to spin up fresh VMs for load testing).


> 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.

Arch Linux has a surprisingly popular (top 50) AUR pkgbuild for it: https://aur.archlinux.org/packages/ttf-google-fonts-git/


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?


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.)


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.


It does if the @font-face rule specifies a local() src.


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


After instinctively reading the headline in a Rob Ritchie voice I am realizing I may have watched the West Wing too many times.


Currently on my fourth viewing of the series :)

It's the only show I can watch over-and-over again.


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.


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.


Only your fourth? ;)

Definitely my favorite show.


Hah, it's the main reason I clicked this one.


I was hoping this would show up because the first thing I thought when I read the post title was, "Crime, boy I don't know."

I love that show.


If there are any other West Wing fans here (and apparently there are!), you have to check out The West Wing Weekly podcast. It's hosted by two people, one of them Joshua Malina, who played Will Bailey on WW, and is basically them recapping each episode, as well as interviewing people from the show or somehow relevant to the episode (e.g. senators, etc).

Seriously, if you love the West Wing, I can't think of any way that you won't love this podcast.


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.


Sorry about that! I've changed them to just links!


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.


It also does the opposite of lightening the page load. The amount of bandwidth I've wasted due to silly animated gifs...


I'm still waiting for the Chrome extension which loops gifs only when I hover on them.


This exists, although it only works when you press Escape: 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.


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.


I think I've seen play buttons on gifs ...


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.


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.


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.


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.


In Firefox, >Options >Content >Fonts >Advanced Unchecking "Allow pages to choose their own fonts..", blocks Webfonts and System fonts which configured User fonts have the necessary characters to render. In about:config gfx.downloadable_fonts.enable > false ,will block all webfonts, but this breaks many sites like imgur & g̶i̶t̶h̶u̶b̶ which use webfonts to display navigation icons.



I hadn't noticed github switched, I thought svg might be a bit heavier but they say pageload time hasnt suffered and rendering 'jank' improved.

Github were using correct ranges for their octicons at least. iirc there is a common software named 'fontawesome' which has caused trouble by creating custom webfonts with incorrect character ranges.


Font Awesome [0] is more of a service than software. Yes, if a site is using icon fonts, more likely than not they're using Font Awesome's (telltale "fa-" names in the source). They're adding a "pro" level that offers SVG as an option.

[0] http://fontawesome.io


I use NoScript for Firefox, which can block fonts for untrusted sites. There is also a setting, in the browser itself, to universally prevent sites from from using their own font specification, so your font choices are the only ones used everywhere. I used to use that, but some sites use icon fonts (e.g. Github), so I prefer being able to whitelist specific sites with NoScript. I also set a minimum font size to maintain comfortable reading across all sites.


uBlock Origin has a switch to block "remote fonts". Should work in Firefox on Android as well.


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.


It's an option in uBlock, and it works great:

https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-...


I use this option. It's nice, but beware that your system fonts may not provide all of the unicode characters some pages expect, which can sometimes greatly hinder usability for sites that use such characters (and nothing else) in UI elements.


On my iPhone I use Fusion by Firefox as an app that gives me the option to block ads AND web fonts. Love it.



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.


about:config

search for webfonts.enabled. change to false.

alternatively, install noscript extension to have a UI with whitelist.

if you are not using Firefox, then i have no sympaty. wait until google cares about you.


Also, in preferences, you can uncheck the box that allows sites to choose fonts. After I saw your comment I fired up Chrome to check and was surprised that there seems to be no option for this.


Reason there is no option on chrome: google serves 99.9% of the fonts online for "free".

That means every site with a custom font from google now leaks the page and time you are accessing to them.

Same reason they forbid disabling 3rd party referrer on chrome.


With Firefox 49, it seems that the relevant configuration option is named gfx.downloadable_fonts.enabled.


What about sites that use fonts for icons only?


Welcome them to the wonderful world of unicode! I flipped over all my icons to emoji, they're reasonably comprehensive, albeit less standardized (if you have really persnickity designers that might bother them).


Firefoxes 'user font' facility tries to accomodate them by fallback to Webfont if the glyphs are not included the user fonts unicode ranges. This works with sites that use icon or expansion unicode ranges to display icons, but some eg. imgur assign icons in the range for common characters, so they look dumb, but at least something gets displayed.


You can disable custom fonts in most browsers. I've had them disabled for years in firefox. My only complaint is that occasionally some sites use custom fonts as icons (why!?) for buttons. (microsoft in particular loves this)


In your hosts file or with PrivacyBadger, kill (iirc) fonts.gstatic.com


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.


For icon fonts you can use this great service to generate only what you need from various icon fonts:

http://fontastic.me/


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...


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)


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


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


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


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.


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.


Which has nothing to do with cache sizes.


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?


> 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.


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.


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.


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.


Sorry folks. I've changed them to just links


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.


Surely any screen recording software can output as a video format? Converting from video > gif > video would produce a janky output.


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.


Normally I'd agree with you but in this instance they really are being used to illustrate slow load. Still very distracting though.


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.


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.


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.

Relevant: Page Weight Matters (2012) http://blog.chriszacharias.com/page-weight-matters


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.


Yes. Why would developers optimize for the platform that the majority of users use? Truly a question for the ages.


ALL web developers. All. That word means something.

Just because something is popular doesn't mean everyone needs to cater to it.


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".


>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.


> 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.


> 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.


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.


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.


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.


Seems like it could at least be mitigated on the browser's side though: "This text was at the top of the viewport before the restyling, so let's scroll the document to the point where that text still appears at the top."


The text in column 1, 2, or 3? Or perhaps you were reading the text in the footer at the time that the page decided to slap on its makeup?


Yeah, so it clearly can't solve everything, hence "mitigate" instead of e.g. "completely solve". In any case, I'd argue that 90% of the time it's better than doing nothing at all.


Counting pixels is primitive; accepting text layout variance and making the web page look good with all variants and renderings of any reasonable font is less primitive.


Visually inspecting the output in a handful of environments and hoping it generalizes to all current and future environments, because there is no way to programmatically determine what the environment is actually doing with the content, is primitive. But it works well enough for blogs and shopping carts, so there must not be a problem.


Yes, but isn't it so that the system font is displayed in one step? I mean, if you just have HTML with images with their dimensions specified, I don't think the page will jump around.


"Legible" is a funny way to misspell "perfectly representative of the artist's unique and precious vision".


Whatever you want to call it when text can barely be read, falls out of alignment, or disapears entirely because a font renders at a fraction or multiple of the size of the desired font, despite being the same "size" in "centimeters" or "pixels" or "ems", or when hair-thin text that looks great on an iRetina is rendered on low-density screens, etc.


"Incompetence" is a good word.


>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.

I suppose some people are happy with color: red, while others like a bit more variety and opt for color: #a82a33.


If #a82a33 takes ten seconds to load and everything is invisible until it does, you're absolutely right I'm happy with red!


> 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.


"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?


Registration is open for Startup School 2019. Classes start July 22nd.

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: