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"
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.
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.
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.
(There are many ways to avoid reflows with font loading, eg font-display: optional)
- 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.
> 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.
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.
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!
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.
They provide the tools to bundle the fonts and serve them yourself:
https://fontsource.org/fonts/merriweather-sans
Will update original comment.
> 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/
The user likely has no idea they contacted Google — it only happened because the code in your application executed it.
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.
Your website is malware that contains code which makes the visitor's browser connect to Google's server.
Though it arguably doesn't get enforced anyways, except for some big corps.
It doesn't often really work out that way.
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).
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.
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.
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.)
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); }
@font-face { font-family: Palatino; src: local("Palatino"), url(palatino.ttf); }
Self-hosted web fonts are fine.
Going back and forth on allowing sites to set text/background colors.
Good content doesn't need graphic design tricks to remain interesting.
More like self-indulgent wankery.
https://addons.mozilla.org/en-US/firefox/addon/decentraleyes...
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.
https://addons.mozilla.org/de/firefox/addon/localcdn-fork-of...
But sometimes if the webpage looks funny, you have to deactivate it.
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.
Why exclude aesthetics? There is no need for it. 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.
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.
- 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).
Such as?
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.