Live data from Hacker News

Self-host your fonts for better performance

wicki.io

51–60 of 417 posts

Re: Self-host your fonts for better performance

#51
post #5

I'm usually the first one to sneer in disbelief at super users who 'go nuclear' and disable the likes of javascript and images when browsing the web, but lately, I've been experimenting with having custom fonts disabled (that is, fonts I don't have locally), and it feels to me that page loads are much faster, and in some case more readable (pages feel 'cleaner'?). The only issues I've come across so far is when a sit…

The "cleaner" feel may well be to do with better font rendering for desktop fonts, because you'll be using something like TTF rather than WOFF. Web font files have to trade off file size for quality, which desktop fonts don't have to do.

Both Firefox and Chrome use their own font rendering, regardless of whether you're using system fonts or not.

Re: Self-host your fonts for better performance

#52
post #5

I'm usually the first one to sneer in disbelief at super users who 'go nuclear' and disable the likes of javascript and images when browsing the web, but lately, I've been experimenting with having custom fonts disabled (that is, fonts I don't have locally), and it feels to me that page loads are much faster, and in some case more readable (pages feel 'cleaner'?). The only issues I've come across so far is when a sit…

Web fonts are a big one in terms of making various websites feel fast because, when implemented incorrectly, they massively slow down initial text paint. 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,…

In my experience it's not about a website being "heavily web-centric" (which I'm not sure I understand to be honest - surely websites are by definition "web-centric"?) it's more about being able to match brand fonts. If sites didn't do that they'd end up feeling pretty weird because the crossover of installed desktop fonts is pretty low: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html (There used to be a better site with fonts listed by what percentage of Windows and MacOS systems had them installed, but the last time I saw it was a while ago and I can't seem to find it again.)

Re: Self-host your fonts for better performance

#53
post #32

Earlier quoted context omitted.

If you want a really fast web experience, try disabling images and javascript too! (on rereading this I sounded sarcastic, but I really wasn’t trying to be)

I'm using uMatrix and by default all javascripts are blacklisted until I explicitly enable it for the site. The downside of this is that lots of websites are broken, payment sites are non-functional, but after a week of building the whitelist, the web is somehow usable again.

I do the same. What a sad state the web is such that it is completely worth it to spend a week or two building a whitelist just to make it palatable.

Re: Self-host your fonts for better performance

#54
post #32

Earlier quoted context omitted.

If you want a really fast web experience, try disabling images and javascript too! (on rereading this I sounded sarcastic, but I really wasn’t trying to be)

I'm using uMatrix and by default all javascripts are blacklisted until I explicitly enable it for the site. The downside of this is that lots of websites are broken, payment sites are non-functional, but after a week of building the whitelist, the web is somehow usable again.

I'm in the same boat (mobile + desktop), and agree. One needs to overcome the initial setup of the 80% most used sites. When that is done you get way less tweaking uMatrix. Improves speed, responsiveness, privacy, data usage and battery drain for me on my mobile. For quick one off article reads i load the page in Firefox Focus.

Re: Self-host your fonts for better performance

#55
post #15

Mainly for performance reasons I've recently gone from using hosted/local Google Fonts to just calling the system ones (some variant of `-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue`).

Something like this is really popular, covers most cases and older systems/browsers and even emojis: `ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji`

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.

Re: Self-host your fonts for better performance

#56
post #39
post #5

I'm usually the first one to sneer in disbelief at super users who 'go nuclear' and disable the likes of javascript and images when browsing the web, but lately, I've been experimenting with having custom fonts disabled (that is, fonts I don't have locally), and it feels to me that page loads are much faster, and in some case more readable (pages feel 'cleaner'?). The only issues I've come across so far is when a sit…

How does one do this for chrome/firefox? Google search gives result for the opposite problem.

In Firefox, setting gfx.downloadable_fonts.enabled to false seems to do the trick. You can verify by visiting https://fonts.google.com/, which looks a bit dull after disabling.

Re: Self-host your fonts for better performance

#58
post #5

I'm usually the first one to sneer in disbelief at super users who 'go nuclear' and disable the likes of javascript and images when browsing the web, but lately, I've been experimenting with having custom fonts disabled (that is, fonts I don't have locally), and it feels to me that page loads are much faster, and in some case more readable (pages feel 'cleaner'?). The only issues I've come across so far is when a sit…

The "cleaner" feel may well be to do with better font rendering for desktop fonts, because you'll be using something like TTF rather than WOFF. Web font files have to trade off file size for quality, which desktop fonts don't have to do.

Most free fonts are rather poor quality. Most font designers seem to publish web fonts for free as an advertisement for their services or print font products they sell. As a consequence, while the sample sentence might look great, the feeling when reading is poor. Especially screen optimisation is lacking, which is what distinguishes the usual fonts you get with your OS (like Arial or Roboto) from stuff you would buy for print (like Helvetica). Also, people tend to pick more fancy fonts to set themselves apart, which of course decreases readability even with very good fonts: you can just read fonts faster if you are used to them, uncommon ones slow you down and feel uncomfortable for long texts.

Re: Self-host your fonts for better performance

#59
post #11
post #5

I'm usually the first one to sneer in disbelief at super users who 'go nuclear' and disable the likes of javascript and images when browsing the web, but lately, I've been experimenting with having custom fonts disabled (that is, fonts I don't have locally), and it feels to me that page loads are much faster, and in some case more readable (pages feel 'cleaner'?). The only issues I've come across so far is when a sit…

Have you tried something like uMatrix? If you use it in the denylisting mode, it doesn't seem to impact much on my web browsing experience. By default it is in allowlist mode, which means it's speedy to open pages, but you run into trouble quite quickly. I really can't stand browsing the web without it.

What is the maintenance status of uMatrix? I haven't checked recently, my most up to date info is that Gorhill left it due to too many bogus issues filed on Github.

Re: Self-host your fonts for better performance

#60
post #15

Mainly for performance reasons I've recently gone from using hosted/local Google Fonts to just calling the system ones (some variant of `-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue`).

This is also the Bootstrap approach, they call it the Native font stack.

https://getbootstrap.com/docs/4.0/content/reboot/#native-fon...

Post reply on HN