Hacker News Reader

Comment by night-rider | Hacker News Reader

It always annoys me when a site hangs when it tries to load something from fonts.googleapis.com. Developers need to use a system font stack which loads fonts from the system itself instead of remote web fonts. On a fast connection you don’t notice it, but you will notice it on a slow connection, and the majority are on slow connections. Developers need to deliberately use slow connections and see just how responsive their site is. Don’t develop on a hyper fast connection because you assume the site loads super quick and overlook latency issues. I think you can emulate slow connections in browser devtools so there is that.

View on HN

Use font-display, people.

Required reading, “More than you ever wanted to know about font loading on the web”: https://www.industrialempathy.com/posts/high-performance-web...

Edit:

> Developers need to use a system font stack which loads fonts from the system itself instead of remote web fonts

IMO the takeaway is "self-host fonts, make sure they're small files, load early, and don't block render," not "only use native fonts"

Thank you goodperson!! You made my week!

I love the progress bar at the top of that page. It is a better gauge of the required time commitment than the "7 minute read" or by glancing at the scrollbar block size, IMO.

Which browsing contexts still feature the affordance of scrollbar blocksize? I thought UX as a profession had chosen to totally commit to the sin of removing it.

UX is not a monolith

You mean like a constantly visible scroll bar? Like any windows PC? Or Mac if you enable it?

Scrollbar blocksize wouldn’t usually be useful for estimating content length anyway because of comment sections.

I'm not too fond of it, it's sacrificing 10% of the screen height to show redundant information.

It's not really doing that, it's under the title bar.

It's broken/not working on current Firefox though :(

I usually use my element blocker to hide these things. They animate while I try to read and it's very distracting.

It is a good idea but not an original one: what it's really doing is reinventing the vertical scrollbar, but placing it horizontally, with a bunch of the functionality missing.

Isn't it a shame that OS people have started making scroll bars so hard to see that someone is having to implement a less functional equivalent on-page.

Well its irrelevant because the progress bar is content only and the scrollbar includes the comment section.

I suppose you can `.content { overflow-y: scroll }`.

Emacs tells you how far down you are, "3% of 80k" etc.

Unfortunately the light on dark theme made it hard to read, I could not progress past the first page.

Just use Dark Reader.

Developers need to use a system font stack which loads fonts from the system itself instead of remote web fonts.

The default font display setting for Google fonts is 'swap'. Using font-display means the browser will block rendering for a short time, and then use the fallback font if the font hasn't loaded, and then swap in font when it does eventually load.

But, and here's the important bit, the block period for 'font-display: swap' is 0ms. In other words, Google Fonts works how you think it should already so long as the developer has included a fallback system font in the font-family.

I suspect you're attributing a blocking problem to Google Fonts when really it's caused by something else.

That swap value lives inside a CSS file that, by default, is blocking. Opening a new connection takes quite a lot of time.

You can serve the font from your own web server, and avoid any problem with fonts.googleapis.com

This approach also simplifies GDPR compliance.

And reduces Google's ability to track you if you have are using an ad/tracker blocker.

I disabled web fonts by default in uBlock Origin. The internet is so much better without them. I selectively enable them for sites I use frequently that have special icon fonts that mess up the interface if they can't load.

Is there a need to use uBlock for this sort of thing? In Firefox, there's a button to allow sites to use their own fonts, in the 'advanced' fonts menu. I don't see any reason why a website should pick it's own fonts.

I go back and forth on allowing it to set background and text colors. Forcing black text on a white background does make some pages pretty ugly, but it does force everything to be readable.

There isn't, except that it makes it possible to selectively enable them on certain sites. They don't bother me for things that I use regularly and already have them cached, like my bank. In fact, without them a lot of UI elements like carets and button icons become junk.

Yeah, the caret issue was a little weird to get used to, but I find it kind of funny now.

It's custom fonts that don't share metrics with built in fonts. If they don't do that the page content jumps around when the fonts load. Custom fonts were a terrible idea, I wish browsers would just drop support for them.

EDIT: Unless there's a way to include metrics outside the font there really isn't a way to prevent reflows when it loads other than blanking the entire page until then.

Is there a setting or extension that just uses the closest available system font and blocks the remote API?

The "closest available system font" is determined by the font names in a site's stylesheets, not by magic.

There is no way that a browser could figure out what the "closest available" system font is, or that one even exists. It's up to the designer to specify the font(s) to be used.

You can disable 3rd party fonts.

On Firefox, this is as simple as going to about:config and setting gfx.downloadable_fonts.enabled to false.

On Chrome, it requires adding the flag --disable-remote-fonts to however you're opening it.

This breaks a lot of sites that use custom fonts as compressed replacements for monochrome SVGs.

Those sites are already broken for accessibility.

If sites don’t specify image dimensions, the page content jumps around when the images load. Images were a terrible idea, I wish browsers would just drop support for them.

(There are many ways to avoid reflows with font loading, eg font-display: optional)

The solution to this is to simply not display anything while the page loads.

s/page/font, which is what `font-display: optional` does, sort of. There's a 100ms blank grace period, and if the font's not ready by then it uses the fallback font. (It'll still load, and be ready in cache for the next page visit)

So here you get the worst of both on a slow connection.

- The page takes an extra 100ms to load

- ~ a minute later (when you're halfway through reading it) the content will jump by some large amount.

There isn't a nice way to do custom fonts on the web and you should just avoid them.

Sorry, no part of your comment is true. This is easily the best option for slow connection/device users, and it comes at the expense of the design.

> The page takes an extra 100ms to load

Nope. Slow connections' floor for first paint is 100ms when using `font-display: optional` – not an additional 100ms. The page is still loading like normal in this period. (If you're already under a 100ms FCP for 3G users, you know all of this already)

> the content will jump by some large amount

`font-display: optional` is literally designed to prevent this from ever occurring. Either the font is ready for first paint in 100ms, or another font is used.

It's not even clear if using Google Fonts is GDPR compliant (since you're leaking the fact that your visitor has visited your website): https://github.com/google/fonts/issues/1495

Even if you do want to use your own hand-picked font on your site, just self host it, or bundle it with something like https://fontsource.org/

They provide the tools to bundle the fonts and serve them yourself: https://fontsource.org/fonts/merriweather-sans

EDIT: The original comment mentioned "fortawesome" instead of "fontsource". I mixed up the names, my bad!

Surely you are not processing data in this case though? The client (software) determines whether to make a connection to fonts.google.com. Your website never passed the information to google.

> Your website never passed the information to google.

Your website is malware that contains code which makes the visitor's browser connect to Google's server.

No, that's not how it works. If the website (via js or tags) requests that something is called, than your software calls it and you're responsible. The client only runs your software, in this case, HTML & co.

Though it arguably doesn't get enforced anyways, except for some big corps.

That may be technically correct, but doesn't count in front of a judge. They generally don't care for implementation details but they care for the results. And the result is that you made your visitor talk to google.

Reading the relevant court decision actually showed enough technical understanding by the judge to make a balanced decision.

The reasoning was that as it is so very easy to self host Google fonts and with caching as an argument gone there is actually not enough reason anymore to use the hosted version by Google and transmit PD to Google.

Would the site have used a foundry that didn't offer self hosting the reasoning might have turned out differently if the site owner could have made a strong argument for using this specific font by this foundry.

At least that was my reading but IANAL.

Judges do not tend to be impressed by technicalities. You're causing the information to be passed to google; the means by which that happens are largely irrelevant.

And also, if the technical line of argument were found meaningful, it could also be used for absurdities: "no, your honor, my website didn't display copyrighted images without a license – it merely gave the visitors' browsers some instructions which they happened to interpret in a way that resulted in them causing some pixels on a screen to light up in a way that somewhat resembles the copyrighted images".

Technical people often see law as a form of code, and the judge as a form of code executing computer, able to be tricked by literal interpretations.

It doesn't often really work out that way.

Indeed. And even though I consider myself a technical person through and through, I wouldn't want the law to work like that. We, as humans, are not capable of specifying society's functioning at that precision. We need the fuzziness of humans in the loop.

Neither would I. Though every now and then I wouldn't dislike to be bound to rules that I can evaluate in advance, without having to bet on what a judge's a posteriori interpretation will be.

I agree. But other times I'd also very much dislike being bound by "code" that the democratically elected lawmakers agree is buggy (buggy compared to their and the electorate's intentions).

This is one of the services lawyers who are specialized in the area can provide; they will know the case law around particular rules, etc.

Tax Law is especially interesting here, because you can basically depend on what the IRS has said but there's a chance that even if they said X, the tax court will actually rule Y (in your favor). Sometimes the risk can be worth it (if you made a good-faith effort to comply with a reasonable understanding of the law, and the court rules against you, you just have to pay the tax; even if you were found unreasonable you pay the tax + penalty which often isn't that much).

Many websites also do not provide their JS source code in readable form and state the code's license. They purposefully obfuscate it using uglifiers and then build in things talking to Google into their website. Even the usual "isogram" thingy for GA is not readable. Giving this, I definitely hold the web developer and company responsible.

Your website instructed the client to connect to Google, so yes, you are responsible for this passing data to a third party.

The user likely has no idea they contacted Google — it only happened because the code in your application executed it.

It's been ruled once already that using Google Fonts is a breach of GDPR [0].

> The disclosure of the user's IP address in the above-mentioned manner and the associated encroachment on the general right of personality is so significant with regard to the loss of control over a personal data to Google, a company that is known to collect data about its users, and the individual discomfort felt by the user as a result, that a claim for damages is justified.

[0] https://rewis.io/urteile/urteil/lhm-20-01-2022-3-o-1749320/

> bundle it with something like https://fortawesome.com/

Using FA as a CDN is not GDPR compliant, either.

Generally speaking using any public CDN is not GDPR compliant. If you _could_ self host the files, then you can not meet the necessity test required for any of the relevant legal basis in GDPR art 6(1).

Google Fonts and FA are worse, because the personal data is shipped off wholesale to the USA. Neither FA or Google (for fonts) offers a data processing agreement that would make it legal to use.

You're very right, my bad. I meant to link to Fontsource:

https://fontsource.org/

They provide the tools to bundle the fonts and serve them yourself:

https://fontsource.org/fonts/merriweather-sans

Will update original comment.

> Developers need to use a system font stack which loads fonts from the system itself instead of remote web fonts.

Browsers have always loaded a font from the system over a web font if it has a font of that name.

We could just normalize having a lot more free as in beer fonts installed on the average user's machine.

The unfortunate emphasis there is "average user's machine" as font loading times are already a a deanonymization vector/fingerprinting. Way back in the day IE made a big deal about bundling a group of fonts and calling them "Web Safe" and we need an initiative like that again. Take the Top X fonts from Google Fonts and just bundle them with browsers or operating systems and spread those as widely as possible so that it isn't a useful deanonymization vector.

> Browsers have always loaded a font from the system over a web font if it has a font of that name.

This isn't actually accurate. It's possible for a CSS author to write @font-face rules that behave in this way (by including local(...) sources ahead of remote-font URLs), but that's by no means universal practice.

> Values are separated by commas to indicate that they are alternatives. The browser will select the first font in the list that is installed or that can be downloaded using a @font-face at-rule.

https://developer.mozilla.org/en-US/docs/Web/CSS/font-family

`font-family` rules apply ahead of `@font-face` rules. `@font-face` rules are used to source fonts not already installed on the system.

(ETA: local() is to provide alternate family names when a font may be installed under different family names.)

I think you may be misunderstanding how @font-face rules and font-family names work. (Or else I'm not understanding how you're stating it.)

See https://www.w3.org/TR/css-fonts-3/#font-family-desc:

> If the font family name is the same as a font family available in a given user's environment, it effectively hides the underlying font for documents that use the stylesheet.

Given CSS such as

    body { font-family: Palatino, serif; }
    @font-face { font-family: Palatino; src: url(palatino.ttf); }

this will block the browser from using an installed Palatino font and tell it to load the remote resource instead. So it's possible to use

    @font-face { font-family: Palatino; src: local("Palatino"), url(palatino.ttf); }

to ask for the locally-installed font if present, falling back to the remote resource otherwise.

Ah yes, we should entirely limit typographic creativity due to creating slight irritation for the lowest common denominator. Guess we should stick to web safe colours and 90% JPEGs too.

Self-hosted web fonts are fine.

> typographic creativity

More like self-indulgent wankery.

Ah yes, aesthetics, visual style is entirely wankery, gotcha. We should all stick to verdana or something.

Choosing misguided form at the expense of function most definitely is wankery.

You may not care for branding in webpages, but many people do appreciate it.

who cares if all the body panels are misaligned, everyone else has a tesla, then dangit i want a tesla

No they don't. Trust me. Nobody does outside the brander.

Ah yes, "typographic creativity" - going to Google Fonts dot com and choosing Roboto.

Yeah I mean public CDNs are of course bad but reducing the idea of type on the web to its lowest form is a strawman

while i agree with you that webfonts are suboptimal, i dont see how this is a strawman

Quite some time ago, I gave up on letting sites set their own fonts. Why allow it? The ones on my system are perfectly usable and familiar -- some sites may pick slightly better ones, others will go for some annoying whimsical bullshit.

Going back and forth on allowing sites to set text/background colors.

Good content doesn't need graphic design tricks to remain interesting.

This reminds me of a plugin I've been using for a little while, it's not perfect but it caches these requests ahead of time for you:

https://addons.mozilla.org/en-US/firefox/addon/decentraleyes...

https://www.localcdn.org/ is a fork that gets more frequent updates

Oh thats beat how does this one compare?

I've made a few websites. This idea might work for your blog but it doesn't swing with designers. Brand control is everything, and that extends well into typography.

Given the web is about 65% browsed by a Google client, I'm surprised Google Font aren't directly installed into each system fonts on first load.

Local CDN is a pretty good extension:

https://addons.mozilla.org/de/firefox/addon/localcdn-fork-of...

But sometimes if the webpage looks funny, you have to deactivate it.

What is even more annoying with fonts.googleapis.com is that Android has such a poor set of default fonts.

I wonder what the incentive for that might possibly be....

It’s not the developers fault it’s the god damned designers who insist we need custom fonts for everything. These people have no technical sense.

If developers can't efficiently deliver what designers want, within reason, that's most definitely the the fault of developers collectively, even if it might be a big ask of a single developer without sufficient experience or resources.

> If developers can't efficiently deliver what designers want, within reason, that's most definitely the the fault of developers collectively, even if it might be a big ask of a single developer without sufficient experience or resources.

An interesting take on which part of the dog wags.

In your model, developers seem positioned to serve designers.

Having written a book on design, and practised it, I have to say that web is very unusual in allowing designers such rein. In other disciplines, like sound design or product design, the constraints and requirements of the project come first, and designers need to fit their work to that.

A very great many web projects I have seen fail went south the moment "designers" got involved. Designers seems to wield an inappropriate level of power and influence, and operate without proper technical supervision, often breaking things or creating unreasonable demands.

I think this misalignment comes from the early days of the web, when anyone who could write HTML called themself a web designer and took on an entire site development. Even though post-CGI/database the server-side roles were better differentiated, the legacy of "aesthetic driven design" lingers.

I do not want to denigrate web designers, but times have changed and in my opinion, having a website that "looks great" just isn't that important these days. I'd much rather use simpler, accessible, secure, private, content-centred sites.

Sorry, who do you think designs the simpler, accessible, secure, private, content-centred sites?

> who do you think designs the simpler, accessible, secure, private, content-centred sites

That would be the role of a designer who is doing their job properly and paying attention to the specification for a simple, accessible, secure, private, and content-centred site.

> (...) having a website that "looks great" just isn't that important these days. I'd much rather use simpler, accessible, secure, private, content-centred sites..

Why exclude aesthetics? There is no need for it. It positively affects usability, just like the other qualities you described.

> It positively affects usability, just like the other qualities you described.

It does indeed. "Aesthetics" in the most accurate sense of the word, as opposed to orderliness or just "looking right", is about how it makes us feel. Some people seem particularly sensitive to it and say they can't use a site or application that feels wrong. I respect that nuanced choosyness. Indeed I'm sure there's a biological thing going on, as in the way we select berries to eat or choose partners to mate with. Hard to introspect parts of our brain say "that's okay" or "that's off, don't touch". Aesthetics is very real.

But (there's always a but :) ... it should never be put ahead of functionality. As I see it that's what makes "Design" design, and not Art. It's blending aesthetics and elegance within a practical value set. And very often that "requirements set" is given to us designers by another... a film director, a product manager, an information architect etc. They say - "Here's what it has to do, (functional requirement) now go design it (non-functional)".

And what I am saying is that, in Web Design at least, the designers have gotten the upper hand, and that's partly the fault of developers, system architects, or project managers for letting themselves get pushed around like that.

I’ve worked in high-trust environments (read: where public CDNs are noncompliant) and that’s never been an issue. All of these fonts are downloadable and self-hostable.

It is, though. Designers receiving no pushback will just get more 'creative' and make the world a worse place for everyone involved.

If you have bad designers then yes, that makes your life harder. But insisting on a custom font doesn’t make that person a bad designer if there’s a valid reason why including it would improve the users’ experiences.

In what context would a custom font improve the user's experience?

- If the font is part of a brand identity that the user trusts (there’s a reason Times New Roman has Times in it).

- If the font has associations with a particular place or time that you want to imbue your system with.

- If you give the user themselves the ability to select a font that works best for them (for example a font focused on the dyslexia reading experience in an ereader).

> if there’s a valid reason why including it would improve the users’ experiences.

Such as?

Displaying math equations or specific language characters.

Which is really quite rare when the page is non-technical and in English so why do so many pages insist on downloading fonts?

Mostly marketing and branding: the desire for self-expression, to establish a visual identity and a feeling tone in the message.

[deleted]

What are the issues? I freaked out for a second because I'm pretty sure I host materialicons font files and css files.

I checked the docs though and it seems like self-hosting is within the license.

Maybe material icons are different or maybe I'm misreading this page.

https://developers.google.com/fonts/docs/material_icons

That's plain wrong. Sure, if you used Monotype's there will be issues (because they're so litigious), but Google Fonts only hosts open-source fonts so there's no reason to just search the correct font and host that instead (unless you somehow manually tweaked the URL to get Product Sans: that's illegal even if you loaded it from Google's CDNs).

Reply on news.ycombinator.com