Self-host your fonts for better performance
wicki.io
wicki.io
The only issues I've come across so far is when a site uses font symbols, but overall, I've been pleasantly surprised.
https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-...
WOFF has nothing to do with rendering. You can achieve the exact same rendering with a WOFF file as you can with TTF; the contents are the same.
On the other hand, it's possible that in the course of deployment, various things may be dropped from the original font resource: not just subsetting (reducing the repertoire of supported characters), but in some cases also OpenType features (e.g. ligatures or contextual forms), and in some cases hinting is stripped.
If that is done, the webfont version may indeed appear differently than the original "desktop" font, depending on local font-rendering settings.
Is this really done?
Rent-seeking would be if Google demanded money from a font designer to let their fonts be "compatible" with Chrome. I.e. Pay me or I'll make sure your product doesn't work with my product. App stores is a common example; pay Apple or they'll make sure your software doesn't run on the iPhone.
The most usual is that you'll have to pay a certain price up-front (or monthly), and some more for each access. The odds are also good that you won't be able to host the font yourself, because well, the foundry has to count those access, doesn't it? And if you want the foundry to respond any quickly, you better pay some extra.
For example, some foundries require you buy a special expensive license in order to use their fonts in a PDF. IIRC, Hoefler & Co. and Emigre do this (though it's been years since I've looked, so I may have changed this). Their rationale is that since it's possible to extract font from a PDF, they need to pay for any font piracy that results from that.
(never mind that anyone who wants to pirate the font would just go and find a torrent instead of ripping it out of a PDF... and there are torrents of every notable foundry's entire libraries)
Rent-seeking is when a third party uses force to claim profit from an agreement they're not actually party to.
For example, you rent a business property. You pay the landlord and agree to their terms. Next week the mob shows up and demand protection money to "keep you from harm". Implying that harm will surely come to you unless you pay. That's rent-seeking.
The app store analogy fits rather nicely I think, but it depends on your viewpoint.
The agreement is between you and the law in most countries, which says that typefaces are exempt from copyright. The third party are foundries who license fonts to you and charge you more based on how popular your website is.
If you don't wish to agree to the license terms of a particular typeface, you have the option to choose another typeface instead. This includes the myriad free typefaces that exist today.
If you buy something from me or strike a license agreement with me, I'm not a "third party" to that transaction.
> If they were not then why would license agreements even be a thing.
We could make a license agreement that you pay me per breathe of air you take. It’s not my fault if you sign that.
(Though I've heard Adobe Stock and iStock at least works ok for photographers and graphic artists for now)
Now if you use a high-resolution monitor and print-optimized fonts, MacOS will look better. If you use a low-resolution monitor and screen-optimized fonts, Windows will look better. Problem is, most designers come from print and use expensive Mac gear, so they are designing for a minority, their peers, not their users.
This can't still be true. No one comes from print anymore.
It is. The real problem is that a large number of designers like to have a pixel-perfect experience (which on print doesn't really matter as they know what paper will that publication use).
I think macOS will always be optimised for the best experience. Even if that means sub par XP if you don’t go all in on money.
I’d actually be interested in learning more about the rendering vs say windows if you have a source.
It is probably better to say that Apple will design for their intended market. I was using Apple products long before HiDPI was a thing and was never particularly happy with the fuzzy fonts under Mac OS X. While that may be acceptable when designing for print, since accuracy is more important, it is an annoyance in many other circumstances.
On hi-def monitors and laser-printed page, it is lovely both to read and to look at.
I mean, 4K (3840×2160) 23" displays nowadays start at $300, so if you’re still on hundred-buck 1920x1080 then you’re only getting what you paid for.
Going to all hi-def displays is the single best investment I ever made as a professional programmer, reading and writing text on screens daily.
In my recollection (and it's been a few years since I used a Linux GUI) Linux was the one with dodgy font rendering.
To me, fonts indeed look blurry on macOS and weird on Windows. Screenshots from Windows with colored pixels particularly don't look good to me. Though after having seen screens of people using Windows 10, it seems they changed whatever I really didn't like about font rendering on Windows.
I still like font rendering on GNU/Linux (and Android) better it is correctly configured, which it is on widespread distributions with widespread desktop environments (I use a QHD screen). But it could be out of habit. On some configurations, kerning is bad though.
(on rereading this I sounded sarcastic, but I really wasn’t trying to be)
Because I've noticed a strong correlation with lack of accessibility and poor quality content I ended up regretting wasting my time reading.
You'll probably have to let it go someday :(
(Actually, it will be some time after that, since the day it stops working I will spend some time investigating how much work it would be to un-break it myself. The web can pry uMatrix from my cold, dead fingers. And I suspect I am not alone in feeling that way.)
1) No cosmetic filtering.
2) A more powerful interface, as _underfl0w_ describes at https://news.ycombinator.com/item?id=25302405
The key thing which that comment does not mention is that the interface enables a whitelist approach — block everything (read: as much as you want) by default and selectively allow certain types of content from certain sites.
This is important because of where your effort is spent.
With uBO, sites always work by default, but it requires manual effort — albeit mostly not by regular users — to stay up to date and blocking the latest trackers and annoyances. So, the amount of effort to keep uBO functioning is proportional to the rate of change in tracking. uBO is an arms race between advertisers and blocklist maintainers.
With uMatrix, all annoyances are gone by default, but often so is desired functionality. It requires manual effort to make the site work again, but once it works, it will continue to work until the site owner changes which types of resources must be loaded in order to function. So, the amount of effort required to keep uMatrix functioning is proportional to the rate of development, specifically major changes.
So, really, the two approaches take a different bet. uBO bets that trackers and ads will change less frequently than functionality. uMatrix bets the opposite. I know which bet I think is more reasonable. Advertisers have way more incentive to try and circumvent uBO than developers do to regularly break their site's functionality.
This all said, it works very well to use both. Having uBO installed means that when you're un-breaking sites in uMatrix, and you allow something that was actually advertising, uBO will usually catch it for you, so you don't have to see ads. This means you don't have to think quite so hard before allowing something in uMatrix, which makes the overall experience much more pleasant.
UI screenshot: https://i.imgur.com/o0UsSdP.png
You can expand any base domain to see subdomains -- click where there is no text. You can also click the "all" cell to expand to see all subdomains.
That plus adblock makes the web almost... enjoyable.
https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-...
I wonder, though, how the client determines the size? Doesn't that require at least a HEAD request, introducing another round trip?
With that said, they're a fantastic feature but are also way overused. You don't need web fonts unless your website is either heavily type-centric, or has font-related dependencies (such as embedded content of some kind). Icon fonts are also a neat use of web fonts, but they don't make the page "feel slow" when their rendering is slow, because icons loading slower affects our perception of a page's loading time less than its text.
Uh yeah, I lack sleep. I meant type-centric (such as a newspaper).
What are you thinking of in terms of "implemented incorrectly", do you happen to have an example?
I've considered storing each default SVG into the user table and then inlining in the HTML but decided to wait on that optimization since inlining dynamic SVGs itself was such a significant speed boost, especially on threads with hundreds of comments.
Without inlining, each profile image or SVG would be a separate request parallel HTTP request and often at least a couple requests would be slow.
2. If you do find this irresponsible, then by all means create a small SVG file with the 5 icons in it and allow that to be cached, or even 5 small individual SVG files if it comes to that.
With this approach you can be more practical with your goals. If the design cannot be compromised, you can still get to initial paint quickly and let the WOFF files load in as needed.
Edit: If anyone is looking for more information about this, the post [2] from this tool's author from 2016 does a good job of discussing the tradeoffs.
I remember when the browsers even allowed the user to configure a background image for content. You could have all your web sites render over a tiled picture of a brick wall if you wanted. Year after year, we give up end-user configurability and simply hand it over to nameless web designers who decide what is good for us.
I imagine this is partly tongue-in-cheek, but I think the real difficulty here is that CSS doesn't differentiate between "user-configured sans-serif font" and "the system fallback sans-serif font". As a result, you can't allow users to override your font choices without disregarding custom fonts entirely.
.left-sidebar { display: none }
#content { width: 100% /* calc(100% - 164px) */ }
.top-bar { display: none }
body { padding-top: inherit /* 50px */ }
#noscript-warning { display: none }
body { margin-top: inherit /* 1.9em */ }
#js-gdpr-consent-banner { display: none }
options -> language and appearance -> advanced -> uncheck 'Allow pages to choose their own fonts, instead of your selections above'
It's annoying to hit a page with a video player, and all the buttons are little boxes with numbers in them because the icon font didn't load...
I don't see any disadvantages to giving it a try yourself for a while tho' - it's just a single checkbox setting.
In Firefox, disabling "Allow pages to choose their own fonts" does not completely block web fonts (as setting gfx.downloadable_fonts.enabled to false would); what it does is to prioritise the default fonts, and move any page-specified fonts to the end of the fallback list.
This means that for "normal" text, the browser's default fonts will be used, but if there are Private Use Area character codes that are only supported by the site's custom webfont, it'll still get used for those. So icon fonts that are based on PUA code points will still work.
What doesn't work in this scenario is when the icon font doesn't encode its icons in the PUA, but uses normal Unicode characters -- either symbol code points that are supported by the system's default fonts, or as some icon fonts do, regular English words that then use ligature rules to produce the icon glyphs. (So the icon font contains OpenType mappings such as "phone" -> [phone icon].) In this case the content on the page will end up rendered using the default font instead.
[Edited: HN doesn't let me include an actual phone icon there, apparently.]
On the other hand, android has only one system font, Roboto, which kind of necessitates using external fonts
I personally find browsing the internet without javascript or cookies enabled by default to be incredibly frustrating/inconvenient, but I'm sure it's all very subjective, down to your own personal browsing habits.
From my POV I too find it frustrating at times, but I'd say much of that comes quite unnecessarily not from JS use, but its abuse, eg. fails to display text unless JS is enabled. HTML is pretty good at that!
There's no point me boring you with all the plusses of not using js (just ask) but speed... once a connection is made this http://antirez.com/latest/0 is pretty much instantaneous.
(thanks for your reply)
Some people even invent new protocols (Gemini comes to mind) to circumvent some of these frustrations.
It actually was quite pleasant and readable, despite the particular font choice.
Of course, there’s always the tracking ability, but that’s inherent to every CDN.
> Since Chrome v86, released October 2020, cross-site resources like fonts can’t be shared on the same CDN anymore. This is due to the partitioned browser cache
Keep in mind that Chrome basically pioneered the concept of doing OS-level sandboxing between websites. We can complain all we want about how Google should give people the option to choose whether they want hard site isolation or not, but if it weren't for Google's investment in Chrome, we wouldn't even think of the option. Would it be better to live in a world where hard problems don't get possible solutions at all, where no one feels like they have choices taken away from them because the choices were never given them in the first place?
(I do firmly agree that the very existence of Google is anti-democratic, though... but I get there via an entirely different argument. I'm glad to see more people concluding this, nonetheless.)
As for technology existing only because of Google or some other large company, that's not the case. Google was more innovative when it was smaller. Netscape created the whole browser industry as a small startup. Just let a lot of small to medium size companies compete in the market and split the ones that become so big as to become a threat to the whole ecosystem.
Similarly Google at its scale can tackle large problems more efficiently than having 10000 medium sized companies pool their resources together to do the same.
In other words, everything has pros and cons that depend on each particular situation. Large companies aren't "all bad" and small companies aren't "all good", you just chose to give lower priority (or ignore) ti the bad aspects of small companies while showing concern with the bad aspects of large companies.
No, a plurality of people agreed on the solution, and everyone else disagreed with it but was stuck with it.
> Therefore you are not a the whim of a single person or entity and this legitimates the way you live.
Now you're at the whim of a popularity contest.
Entity A does thing that impacts entity B. Entity B makes those effects known to a broader group than entity B. Maybe entity A does thing about it, maybe not.
2) Every setting comes with an opportunity cost. More than one product has died under a morasse of way too many configuration flags, or focused on features to please a minority of users at the cost of the product itself.
3) The group that says they want the setting is always bigger than the group that will actually use the setting.
Sure, their code will compile faster but they won't get a feel for how it behaves in the real world. Probably the best is to have fast build servers on the LAN while typing at pedestrian machines.
Also I doubt there are many people reading the web on 2004 netbooks. You know what I am talking about.
2. I used a small 2007 laptop well in to 2018, and I believe that the software I wrote was better for it.
The result is designs I can actually be proud of, not ashamed.
Of course, no one is paying me for it. And that's OK. I'd rather be doing this for frew than getting six figures working on advertising bullshit which will be gone tomorrow.
Let me ask you a similar question. Is there any evidence whatsoever that Google built this service out of the goodness of their hearts, and have no intent of using it to gain any sort of competitive advantage?
And if you do believe that, is there any evidence that Google will continue to spend millions of dollars supporting a service that gives them zero benefit? What does their track record say about that?
For the record, I'm not anti-Google, nor ultra privacy focused. I just think it's common sense that Google expects some sort of ROI here. To many, using Google fonts is considered a fair exchange (especially given that their data is anonymized) and I think that's a perfectly reasonable position. But make no mistake, there is a clear benefit to Google here.
Bundling with browsers outside of Chrome would be a different story, but Google has no say over that anyways.
That's true for now (you should know that Google Chrome will deploy changes on caching third-party content), but webfont caching simply doesn't work as well when you've realized that websites that do use webfonts have a tendency to pick fonts that are unlikely to match another website.
Hasn't been true for Safari for quite some time, and Chrome followed suit two months ago. That's not "will deploy," it has already been released in Chrome v86.
* In uBlock Origin (which is a must have on bad internet): Settings > Block remote fonts
* In browser, Firefox about:config, gfx.downloadable_fonts.enabled, Chrome run with --disable-remote-fonts
* Download fonts when on good connection
> You can download all Google Fonts in a simple ZIP snapshot (over 300MB)
> https://github.com/google/fonts
installation depends on OS, on Arch Linux it would be
$ yay -S ttf-google-fonts-git
Google recommends
> using a fonts manager (such as SkyFonts) that automatically syncs the latest versions of fonts from the Google Fonts API to your computer.
https://developers.google.com/fonts/faq
------
I browse with JS disabled by default in uMatrix, turn it off on problematic websites (maybe ten times a day). It would revert back to disabled on next browser reload. And I have maybe 20 hosts enabled by default which I use often enough.
https://github.com/sergeykish/uMatrix/commit/929a25e39fc1d38...
> If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used.
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
And this is not the case for Google Fonts anymore, for example
https://fonts.googleapis.com/css2?family=Noto%20Sans
I've created issue
https://github.com/google/fonts/issues/2855
----
>> Any correctly-coded website will try a local source first, which should help a lot for poor connections.
> Then Google Fonts is not correctly coded, as it'll use remote font only. And myriads of websites reusing Google Fonts snippets. To try local source first, you have to explicitly ask for it in @font-face/src which Google Fonts does not do.
> So installing font into your OS won't help you with any website using Google Fonts service.
Would you be amenable to "A well-designed web page does not need to rely on custom fonts, provided their impact on page load is absolutely minimal"?
You can unobtrusively serve up a single font embedded as base64 on a static site - a world of difference from some of these sites that load up 5MB of a UX person's vision off some remote CDN.
There are only two ways loading such a site goes:
a) you get to stare at a blank page for a couple minutes while the font downloads, if it downloads at all. (this seemed to be google's favorite way to screw over people with bad connections; acknowledgment that it's going to suck and doing it anyway)
b) you get two minutes into reading the page only for everything to suddenly jump somewhere else when it switches to the font. (this seems more like the result of ignorant web designers)
JS sucks but webfonts consistently make the web an awful place.
It’d be neat if something like that were available for web fonts. Each paragraph gets its own “block” that the installed font uses (and contains padding), and when the font downloads, it won’t reflow. But I’d assume it’d be way too complicated to deal with (different screen widths is the first to come to mind).
So, a bunch of work to fix something that isn't broken when you turn off webfonts and respect user settings.
(1) The options for controlling the style of SVG elements (e.g. on hover) are not great.[0] In contrast, font icons can be styled as easily as any other text.
(2) Font files are usually smaller than their SVG counterparts.
(3) Font rendering is faster than SVG rendering.
(4) IE did not support SVG until version 9, but supported custom fonts since version 5.
(5) Old browsers that did support SVG had serious issues with SVG sprite maps, ranging from creating duplicate rasterisations of the entire SVG file in memory for every use of the same file in a document, to not caching the rasters at all and regenerating them every time they needed to be repainted (e.g. during scrolling). These are fixed now, but inertia is what it is.
That might be due to font hinting. The default fonts (on Windows) were beautifully manually hinted to give a really crisp results without font smoothing. But manual font hinting is super expensive, so web fonts don't do it. If you disable them, I'm sure the system has to fall back to the (higher quality) defaults.
Most web fonts are automatically hinted, so they only look acceptable with font smoothing on (at normal font sizes with normal DPIs). If you turn smoothing off, the fonts look super ugly with all kinds of artifacts like weird double-thick lines.
I've tried to disable web fonts because I hate font smoothing (to me it's just blurry, not smooth), but the issue I've run into is the fad of using a custom font for icons, so I end up getting lots of unicode tofu for graphics (e.g. https://twitter.com/FakeUnicode/status/1194628430559469568).
It'd be more overhead of course, and basically the opposite of what this thread is about, but it's something I'd be interested in. I'd love to be able to choose a font without things getting mangled.
I'm not too familiar with the details of the icon fonts, but my bet is that most of those characters are in the private use area.
I guess it boils down to if an extension can hook into the font-resolution process, to have different resolution policies for different character ranges. I know there are extensions that can block web fonts, but maybe they just prevent the resource from loading at all.
I used to work at MS, and a lot of people don't realize exactly how much time, money, and love is put into fonts there.
When my team ordered custom fonts, I personally spent a lot of time going over each character pixel by pixel, in combination with many other characters, to make sure everything was perfect. I know other members on my team did the same. It wasn't some sort of mandate, it was just some sort of institutional knowledge, or maybe pride, that Microsoft was paying for custom fonts for our project and we were going to make well sure and good that what we delivered to customers was perfect.
I know there is a holy-war between people who like MacOS's font rendering and people who like Microsoft's font rendering, but I hope everyone can respect the amount of pride that both companies put into their work.
Same platform, different browsers, fonts render differently.
Different platform, same browser, fonts render differently.
Same computer, same browser, laptop monitor vs external, fonts render differently.
Same font, same computer, web browser vs local application, fonts render differently.
It is madness.
How do you do this exactly?
You could add a filter like `*$font,third-party` or similar as well
More readable, and also helps one focus on the content. A lot of web publications with literary pretensions (New Yorker, Quillette, LRB …) use pretty classic-looking externally loaded serif fonts for their articles, which not only slows down reading but can also (IMO) make one less critical of the content than one otherwise would be.
If I were the editors of these magazines I would be seriously tempted to force the use of Comic Sans for all article content. May not be good from advertising point of view but it signals a kind of intellectual honesty that I suspect is valued higher by their readership than a "classic look"
Safari prevents website from using local fonts. Only web fonts.
The thought is that a site could check which fonts work for you based on local fonts and use that towards your marketing thumbprint.
The reason I prefer AA off (with fonts that were designed for it like Verdana or Bitstream Vera Sans Mono) is because I find it less tiring on the eyes. With AA off, the edges are all sharp and crisp, there's no blurriness. It looks closer to print. When AA is on, they look smeared and don't have clearly defined edges.
What is also a puzzler, as displays become increasingly higher resolution, now 4K and heading toward 8K, the need for AA is supposed to disappear. You don't need to fake smoothness at high pixel resolutions, yet many OSes are actually now making it harder to turn AA off.
It gets dumber.. OSes that used RGB subpixel AA (cleartype) because they're now on tablets and other devices that rotate, they can't count on the RGB stripe, so they stopped using RGB subpixel AA and went back to greyscale AA.
Of course, servers should still be capable of serving the fonts that the client requires to render the content correctly, but the browser should be equipped to make that happen as quickly as possible.
- 1. Copyright (though many fonts are free, true)
- 2. Everyone uses a different font (just like everyone uses a slightly different version jquery) so cache hit would be pretty small IMO. Do you really want a browser to be gigabytes large? Especially on mobile it's not viable
Maybe if browsers standardized on shipping, say, 20 carefully chosen fonts (not necessarily the most popular ones, just a good variety of different types of fonts), the smaller websites would follow and use them; but I think any major brand likes to distinguish themselves and have a custom unique font.
Web standards and browser features are generally built for the long term and backward compatibility. I mean, it's not impossible to find a solution, but it's definitely not "let's download some fonts and bundle with the browser, done" kind of problem.
It may be not really carefully chosen, but didn't Microsoft have done this already? (Core fonts for the Web, https://web.archive.org/web/20020124085641/http://www.micros...). The reason they have discontinued this programme is that it actually costs them some money (as the fonts are not owned by Microsoft.)
Also, how would you cater to non-LGC (Latin, Greek, Cyrillic) users?
Absolutely, i would rather give the browser 50 GB even on my phone over paying my mobile operator for downloading the same data over and over again.
And it wouldn't take anywhere near that much, I am sure 80% of most used fonts are only a couple dozen, that wouldn't tale gigabytes
For example, Google Maps by default doesn't load maps of the entire world when you install it. However, it does let you opt-in to pre-downloading specific areas that you frequently travel.
Browsers could do the same by simply adding an opt-in to download / cache common assets like fonts, jquery, etc.
Not embedding all of them would allow tracking. Caching all web fonts would allow tracking.
The solution is embedding all the popular ones so everyone has them and it can't be used as a signal.
https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-...
so it should be possible to log. And given a list it is not hard to download.
This would be especially helpful now that shared caches are going away.
One other option is to actually install the font into your OS. Any correctly-coded website will try a local source first, which should help a lot for poor connections.
Then Google Fonts is not correctly coded, as it'll use remote font only. And myriads of websites reusing Google Fonts snippets. To try local source first, you have to explicitly ask for it in @font-face/src which Google Fonts does not do.
So installing font into your OS won't help you with any website using Google Fonts service.
For a good technical reason: the version installed on the computer may not really match whatever the version on Google Fonts serves (fonts have notoriously no semantic versioning aside from some programmer-oriented fonts, examples of these outside are Segoe UI (changed between Windows 7 and 8) and Liberation fonts (some versions notoriously lack some glyph symbols) and on Google Fonts platform the Exo and Exo 2 problem (which was resolved by renaming the second version to Exo 2)).
Of course, there are also some benefits to Google (you know what are those benefits are).
When you select fonts on Google Fonts, the website instructs you to link to CSS hosted by Google, which is simple to implement, but not performant. Really, you would want to load that CSS asynchronously, so that the rendering of the whole website doesn't wait for Google Fonts. (Here's how you load CSS asynchronously, by the way: https://stackoverflow.com/q/32759272/247696 ) Or even better, host the fonts yourself.
https://developers.google.com/fonts/faq#can_i_download_the_f...
> Note that when browsers render websites that use the Google Fonts API, they will check if a font is installed locally on your computer, and prefer to use the local version over web fonts.
https://fonts.googleapis.com/css2?family=Inconsolata&display...
@font-face {
font-family: 'Inconsolata';
...
src: url(https://fonts.gstatic.com/s/inconsolata/....woff2) format('woff2');
unicode-range: U+0000-00FF, ...;Some random references to it w/ the snippets:
https://stackoverflow.com/a/52413970
https://stackoverflow.com/questions/18303215/how-can-i-preve...
I've created issue "Local font name makes web accessible", and I hope it would be fixed.
Self-hosting is the way to go since it gives you full artistic control and you can use things like the Unicode-range CSS property to tell clients how to combine smaller fonts so you can support many languages without forcing a French browser to download a ton of Chinese glyphs which aren’t used on the page.
Another nice option we have now is using font-display to allow using a similar system font until downloads are completed, which can work really well for slow connections:
https://calendar.perfplanet.com/2020/a-font-display-setting-...
Correct me if I'm misunderstanding, but don't the vast majority of fonts _not_ include full Unicode support, or even close to it? I know of GNU Unifont, but not many people are using that on the web...
I take your point on selectively downloading the relevant glyphs for the user's locale, but this could be done by the browser too - it is aware of the locale.
There are some things that are really well executed, and other things where the ball gets dropped completely.
Chrome will come along and do something like hide parts of the url, or allow scroll-jacking, but then say that fonts should probably be a system level implementation.
It would be trivial for the chrome team to establish something like a series of web-safe fonts like Roboto, Inter, Merriweather, etc. Stuff that gets used incredibly often. Even things like licensing aren't really an issue when most of these fonts are under their open license not to mention that Google has the money to be able to license it if they wanted to.
I could learn how to do it in 30 minutes, but I don't feel like spending 30 minutes learning that.
I'd guess that 99% of users don't know how to install fonts or simply don't care about it enough to their spend time installing fonts.
https://addons.mozilla.org/en-US/firefox/addon/localcdn-fork...
https://codeberg.org/nobody/LocalCDN/src/branch/main/resourc...
(and adds extra privacy as a bonus.)
LocalCDN seems to be a fork of it, why should we be using it when it has so few users?
https://github.com/Synzvato/decentraleyes/issues/34
However maybe the situation has changed since then..
The development of Decentraleyes seems to have slowed down considerably, and LocalCDN supports more CDNs / frameworks, and is also opensource.
LocalCDN is also under active development, and the dev seems more pro-privacy.
For brand-specific fonts though, I highly recommend cleaning the font files from any characters/features you don't need, and then just serve the (now in many cases MUCH smaller) file directly.
In this article: https://www.zachleat.com/web/web-font-data-uris/ mr. Leatherman advises against (because of the bulkiness of web fonts blocking rendering for too long) but he has not taken into account rolling your own custom mini-font with just the glyphs you need.
So I think your idle musing may indeed have merit!
Perhaps those more knowledgeable and preferably with benchmarked evidence could care to comment?
https://getbootstrap.com/docs/4.0/content/reboot/#native-fon...
At my previous job I was one of the only Linux users (using Ubuntu) and some designers were shocked how bad their designs looked on my computer due to the Ubuntu font. We removed Ubuntu from the list and just went with sans serif instead.
IP address, which can be linked to an individual. Origin / Referer. Is that it? Does google analytics add request headers?
So, at least "this individual visited this site at this time"
So, also, location and daily habits, where you go and so.
(The tracking company probably has you associated with a bunch of ip addresses and with a bit fingerprinting they'll know it's you at the ip at that time)
@font-face { font-signature: somehash }
And the browser just checks to see if it already has the font. If you release a webfont you can share it with signatures or just generate signatures if the author hasn't done it for you.
This way if you're self-hosting Lato and the user already has Lato, they don't need to download it again.
Think of all the big JS frameworks. If they were all referenced by hash, their size would become pretty much irrelevant, as they would be amortised across potentially thousands of requests.
But the web chose to go with unified resource LOCATORS for everything, and I don't think it'll be easy to change that mindset.
It's the reason why people do crazy things like register DOI (a location based URL, that is hosted with a single point of trust/failure) to reference git hashes (a content addressed URN). They don't know better, and they want readable names.
A different issue with this kind of caching tho is that it is a potential side channel for privacy sensitive information.
For example if my script requests the pornHub logo, or something else that might even be more specific, like videos themselves. I can use a timing side-channel to figure out wether or not that particular item was in the users cache, and thus visited previously.
Imho they applied the wrong solution to that issue: domain separated caches. You loose the timing channel, but also loose all the caching advantages.
A much better solution would have been to close that timing side channel. If every browser ran TypeScript this could actually be a monad, where a "low resolution timer"-monad is strictly separating timing sensitive portions from high resolution timers.
It would take a while for the cache to warm up, but with typical usage that would not take very long. Your performance becomes a bit of a lottery for a few users, but on the whole you should see gains.
- https://brycewray.com/posts/2020/08/google-fonts-privacy/
- https://brycewray.com/posts/2020/08/good-stuff-without-googl...
I read that as "use Google Fonts"?
He would lose performance but win more privacy.
The current solution is to download the same thing twice. It is wasteful and I offer downloading it only once, but if site A asks for a resource for site B, the resource should not be returned immediately, but after a few ms so that site A gets the wrong conclusion.
It should work if site A can observe only the result of the request but can't check if a request happened or not.
My idea is for such delays to be introduced transparently in the caching service of the browser, not the js engine.
A better trap would be if the browser downloads the resource on the second request as well and compares the hashes. If they differ, the resource is considered uncachable.
My perennial annoyance was how StackOverflow was always subtly broken in China b/c they refuse to host some of their JS. On my own website I noticed that the default MathJAX CDN was also impossibly slow. Fortunately you can just forked a copy on github and use that - which was much snappier. Github-as-CDN
I am not in China but in Japan, and I'm tired of seeing second-class clones of US companies that strongly win the local market just because they are localized.
Only with translating their websites, western companies would be able to win a lot of the market. And if they can also localize it, then it's a lot better. But if they do neither, as long as there is some sort of local alternative, your software is dead on the water.
Perhaps blocking a big part of the internet is the real dick move?
Ah yes. It is Google's problem that xi jinping doesn't like Chinese people having an open internet.
I then have to occasionally re-do that work when there's a significant update to the theme that I want to have. It's really annoying.
I wanted to keep the look and feel of the php/gd monospace font (could never find which font this used), but the normal defaultly included fonts i could find didn't have the same stylizing. Inconsolata on google fonts was however pretty close.
Only issue, there would be this ugliness for a half second when the page loaded while the font loaded, monospace has bigger size letters on the same font size, and its worse on firefox, so the banners would often wrap text that was suppose to be contained to one line while this loading happened. I couldn't preload the font, because cross-origin and doing the thing that is suppose to fix that didn't work in chrome.
So I just self hosted it, we already have cloudflare in front. Killed most of the delay, the preload tag killed the rest.
Some recommendations regarding the CSS may be outdated by current "webfont hosting standards". Let's see what 2021 will bring for this project...
Wish it was this painless to migrate from other Google offerings!
(Simplified font definition and usage standard.)
They did. Your browser will use the fall back when you use "font-family" selector.
But that's just the best the CSS spec can offer. Why?
Because the problem isn't a browser problem. It's a system level problem.
Operating systems only come with a handful of fonts. And those packs of fonts may differ per OS. Moreover, most fonts are protected by intellectual property rights. Helvetica isn't a free-to-use font. It's IP is currently owned by a company called Monotype Imaging. It was originally licensed to Apple, Xerox and Adobe for use. That's why Microsoft came up with Arial. [1]
> It was created to be metrically identical to the popular typeface Helvetica, with all character widths identical, so that a document designed in Helvetica could be displayed and printed correctly without having to pay for a Helvetica license.
[1] https://en.wikipedia.org/wiki/Arial
If you want to use a font that isn't part of your OS, you basically have two options. Either you download a font published under a copyleft license; or you buy a license if it's a commercial font.
Suppose you want to use a commercial font in your website, simply adding it through font-face could be a violation of the IP license. You really want to read the fine print of the fonts you buy. Yes, companies and people do find themselves in protracted lawsuits over illegal font use. [2]
[2] https://www.quora.com/Do-companies-get-sued-for-using-fonts-...
Before Google Fonts, adding a font via font-face was a protracted effort because of all this. You had to mess with font-face, and finding a nice, free-to-use font across various font foundries was hard and laborious.
The big boon of Google Fonts is that it provides (a) a set of free-to-use fonts which are (b) quite well designed and widely used everywhere after a decade. (Just like Arial, Google's Roboto is widely popular.) [3] and (c) extremely convenient to use since it's just a single line of CSS.
[3] https://en.wikipedia.org/wiki/Roboto
However, Google Fonts dominance on the Web only masks the underlying complexity of font management [4] and the legal issues of using and distributing commercial fonts that aren't designed by Google.
[4] https://en.wikipedia.org/wiki/Font_management_software
So, the performance and privacy issues related to using Google Fonts are mainly a trade off people are willing to accept in order to not having to deal with this complexity.
The old alternative is to use "web safe fonts" or "generic font families" which are presumably already available on the vast majority of machines via the operating system. Needless to say, this dramatically reduces the number of fonts designers can choose from. [5]
[5] https://en.wikipedia.org/wiki/Web_typography#Web-safe_fonts
The other alternative is what the blogpost proposes: Download and host any font you use yourself. Provided that you do your own due diligence regarding rights management.
Why is a web designer trying to choose fonts? The web is not a print medium.
No. It is not. However, the foundations of digital media are very much rooted in analogue media, including print.
This includes typography. Whether it's for the web, or movable type. The history of typography is a crucially important part of the Web with pioneering designers such as Jeffrey Zeldman, Jason Santa Maria or even Edward Tufte in fields such as Information Design and human interaction design.
https://www.printmag.com/post/questions-for-jeffrey-zeldman-...
2. If cache partitioning obviates the performance benefit of CDNs for fonts, doesn't this mean you're better off hosting your own scripts and images for the same reason?
3. If CDNs are past their use-by date, will performance measurement tools finally stop admonishing you to host your assets there?
Before: https://www.webpagetest.org/result/201129_Di8J_c734f3b630a33...
After: https://www.webpagetest.org/result/201201_DiG4_230670b40ea6e...
While I'm still using Google Fonts, I inlined all the @font-face declarations into my own CSS files, and was then able to remove the <link> tag (a blocking resource) in the head of the document. Lazy loading images also helped, and using webm for video.
Can caching (Google) fonts, in itself, be used as some sort of security exploit?
I mean, sure, a site can time whether or not you've already downloaded a certain font before, but that's only useful to determine whether or not you've visited any of the sites with that font. Which is only usable if your sensitive site is also using a custom, nowhere-else-deployed font. That doesn't seem to be that painful security wise, compared to, say, telling websites which browser you're running.
Regardless - I support less reliance on custom fonts and a slimmer web overall.
By the way, does anyone know if browsers are at least merging/deduplicating cached resources locally again (e.g. by storing cached objects by content hash)?
The same could theoretically apply to computationally intensive tasks like WASM pre-compilation (although care should be taken to record the compilation time and delay loading appropriately for cached loads from different domains, or that would be the next cache leak).
That said, some decisions should be left to user. I would choose proper caching over theoretical privacy improvement any day.
https://css-tricks.com/snippets/css/system-font-stack/
where you have a list of system fonts across platforms that for serif, sans-serif and monospace. always looks good & no extra downloads
Besides, one should load one or max two fonts, not more and I couldn't care less if that 150kb is cached or not.
At first glance it probably doesn't sound like a problem, I get it's effectively the same as serving them from Google, but I know fonts can also sometimes have strange licensing requirements… so I always figured it was safer just to avoid it entirely.
Downloading a font and using it on a different operating system from where the original download comes from seems to make the font look... unusual?
But most of Google Fonts are either SIL Open Font or Apache Licensed
I am usually inclined to vendor dependencies on the web. Not an ideal solution but I don't like dependencies on CDNs, even if they are indeed very reliable. But apart from making sure the set has symbols for special characters you might need, it is pretty safe to do so in case of fonts and maybe even advantageous.
Also bought some fonts from other services as there are quite cheap compared to the huge amount of work going into their creation.
"The open source fonts in the Google Fonts catalog are published under licenses that allow you to use them on any website, whether it’s commercial or personal."
https://developers.google.com/fonts/faq
This would be the opportunity for them to tell us that applies only to fonts delivered via CDN. On the contrary, they later recommend self-hosting.
https://mobile.twitter.com/matt_lowne/status/119537351841594...
tl;dr - Kerbal Space Program YouTuber gets every video he ever made copyright claimed by Sony after using a track from YouTube's own audio library.
To their credit YouTube did offer a "solution" to the problem but they denied all knowledge of the track being available in their library.
But, basically, yes.
But people also use it for being faster than their main server as CDNs put more effort to be fast than mom-and-pop.
To the author, Google Fonts means "A CDN for fonts".
The article obviously talks about his definition, which may be confusing to people who use my definition.
Basically, does anyone who's doing serious work use Google Fonts anyway? I just assumed it was a thing that mostly hobbyists and personal websites used.
The problem that web fonts are addressing is that you have the same font across all platforms, so if some OS ship with additional fonts we'd be in the same position as before: Not everyone will have this package as part of the OS and you have an inconsistent look again.
It's good because we could stop caring about FOUC and friends, but it's bad because it would give Google even more power over the web.
Or to improve the ability for Google to track you across websites that embed stuff from their servers.
Edit: you can still serve Google-commissioned fonts directly from your domain of course, and CDNs were always a bit fishy
Their side is heinous, evil, and kills babies. Our side is just, wondrous, and angel like.
Thus, they enslave, we strive to break free, and bask in the pure bliss our utter and complete correctness enables.
Musk announces the newest brain-link, of which enplantment is a requirement to use modern phones. User complaints of random, altered perceptions of reality are brushed aside, and mostly accepted.
After a quick altered perception of reality. :P
Perhaps enslaved is on the table, 20 years out?
The capabilities of the web have only been expanded.
You can still build websites in Django and Rails and myriad other "old-school" technologies. What are you missing? Perl and CGI?
To the point of this article, you can perfectly build a website with self-hosted fonts, or with default system fonts. Is this what "lock-in" and discarding good ole' tech looks to you?
It's tiring to see this bitterly pessimistic, conspiracy-laden rhetoric on HN. With the added bonus that as of late it's being radicalized ("subverted", "enslaved"), as some sibling commenters are pointing out. How ironic that the people accusing everyone else of being "enslaved" are themselves carried away by the trends of the time.
But more importantly, this rhetoric is profoundly demeaning.
To web developers and technologists, because it assumes that they are largely incompetent or malicious, and that the commenter and his clique of retro-futurists know much better and are morally more pure than all tech professionals nowadays.
To regular people at large, because it paints them as drones and slaves to greater powers, with no agency whatsoever, instead of analyzing why they may prefer Facebook over old-school forums, and empathizing with them and their problems.
But above all, it's demeaning to the authors of such comments themselves, because it paints them as dejected, bitter fanatics who have lost sight of the forest for the trees.
The web is still full of opportunity - artistic, technical, commercial and otherwise.
If you don't think so, maybe it's time you embrace a low-tech lifestyle and devote yourself to gardening? Everyone will be better off for it.
I did not say you should build everything as an SPA. I said you still can build in SSR - not once did I say what you should or shouldn’t do. But I agree - some sites are better off as SSR, static sites or what have you. What in my comment made you think that I think otherwise?
I also do not think that Django or Rails are remotely similar to CGI sites - what makes you remark that they are hardly the same, when my comment doesn’t suggest the opposite?
This is a problem even without accessibility tech, the page content bounces all over the place during load by default in many SPAs.
<h1>My awesome site!
<p>Under construction
It's about keeping Google Fonts (not saying goodbye!) but simply self-hosting them instead of using Google's CDN for better performance.
Seems like the author's trying to bait us by making us first assume Google's canceling the product, or that Google's done something scandalous so we should avoid it. :(
Just host it yourself, or us a CDN you pay for. Why depend on an external service with no SLA, just for a little speed boost? If they're down, you're down. Break those dependencies on external sites when they're not necessary.
Safari: since 2013
Chrome: since v86 (October 2020)
Firefox: planning to implement
Edge: most likely soon
Opera: most likely soon
As you can see, it is very sneaky by using CNAME Cloaking - https://i.imgur.com/VB2DB75.png
The request is to fonts.gstatic.com, but it resolves to gstaticadssl.l.google.com
Tracking using CNAME cloacking - https://medium.com/nextdns/cname-cloaking-the-dangerous-disg...
This is why 3rd party cookies should always be disabled.
That doesn't seem right at all... I hope I am misunderstanding.
Now, if the admin of foo overrides the cookie scope to be *.example.com instead of the default foo.example.com, then yes it's expected that the admin of bar can steal foo's cookies. This is mentioned in the NextDNS Medium article you linked to, toward the end. This is definitely a "gotcha" situation but at least the default is safe, as far as I can tell.