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.
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.
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.
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.
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?
"The user has visited your site twice over two separate days during the course of two weeks."
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.
Masters of subtlety...
It's like advertisers want me to install adblock... so I will, I'll root my device and adblock all their bullshit forever.
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.
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.
browser.display.use_document_fonts = 0
Surfing the web is a more pleasant experience without WebFonts.
Another thing I hate is when people don't specify the weight for black/bold fonts... which makes the fallback even more hideous.
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.
Telepathic sensitivity to designer intent is extremely common! Don't let elastic, robust CSS layout techniques mess with your pixel-perfect templates!
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.
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 :).
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.
I remember doing stuff like this with Proxomitron in the good old days....
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 . There is also a subreddit for them . 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. :)
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.
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).
You call that "subtle"??? There are like 10 different fonts/boldnesses jumping at me at first sight.
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.
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.
I'm sympathetic to that, but is there really no system font that is sufficiently readable?
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.
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.
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.
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 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 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.
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.
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.
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.
This really seems to be a problem with marketing and design people; we're not stuck with webfonts. We're stuck with unreasonable people.
As a profession, we can't complain that someone might be bothered by the idea of word-wrapping.
It's _also_ a very reasonable & readable amount of text in a row. There's nothing wrong with that.
To be fair, 120char wide code is also not too bad for this purpose and readability.
Presumably, that's why they used 80 characters in the first place, as anything more is too hard to read.
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 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.
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.
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."
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.
> 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. :)
> 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 ;)
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
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.
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).
Web fonts are better than the stuff people did to do this in the old days. Crazy abominations like siFR  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.
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.
(Many people in this thread have said they do not value consistent layout. Nor do I, but that is the usual reason.)
Less so nowadays, where HTML is used for layouts closer to say, PDFs.
Yay, more bits for fingerprinting!
A similar effect will probably be achieved with IPFS, where objects are stored by their hashes.
Helped me save lots of bandwidth.
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.
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.
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.
You really don't want it on if you expect the phone to tell you when you have a new message.
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:
To put it more bluntly: https://bestmotherfucking.website/#remote-fonts
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]
4. https://bestmotherfucking.website/ [yours]
5. https://thebestmotherfuckingwebsite.co/ [with extra satire]
#4's criticism of #3 is spot on, and its mention of Let's Encrypt, gzip and caching make it my new favorite. Thanks!
But if you want to use them make them optional like this site explains :)
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.
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.
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.
It's annoying enough to warrant using Stylish to override the web font.
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.
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.
Arch Linux has a surprisingly popular (top 50) AUR pkgbuild for it: https://aur.archlinux.org/packages/ttf-google-fonts-git/
It's the only show I can watch over-and-over again.
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.
Definitely my favorite show.
I love that show.
Seriously, if you love the West Wing, I can't think of any way that you won't love this podcast.
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 works by taking a screenshot and layering it over the page until you try scrolling or hit Escape again.
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.
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.
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.
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.
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.
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.
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.
Oh? We have browsers eating a gigabyte of RAM now.
But then again we already have canvas fingerprinting... why bother with anything else until the browsers fix that?
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.
Converting GIFs to autoplay=false videos is still a miserable experience with kinda awful results. Not to mention that it takes forever.
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.
(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.
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.
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.
Relevant: Page Weight Matters (2012) http://blog.chriszacharias.com/page-weight-matters
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.
Just because something is popular doesn't mean everyone needs to cater to it.
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".
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.
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.
Not sure if this is a joke or not, most people would complain.
'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.
I suppose some people are happy with color: red, while others like a bit more variety and opt for color: #a82a33.
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.
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?