Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Self-host your fonts for better performance

wicki.io

Post reply on HN
Print view View original

91–100 of 417 posts

Re: Self-host your fonts for better performance

#91

Post by scrollaway »

frereubu wrote: post #52
scrollaway wrote: post #30

Earlier quoted context omitted.

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 bett…

> which I'm not sure I understand to be honest

Uh yeah, I lack sleep. I meant type-centric (such as a newspaper).

Re: Self-host your fonts for better performance

#92

Post by corty »

bzb6 wrote: post #68
frereubu wrote: post #20

Earlier quoted context omitted.

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.

The cleaner look is because most designers use macOS which renders most fonts in a way that makes them all look good (let’s not get into technical details). On Windows the same fonts might look like shit (for example some parts of a character are thicker than the rest for no apparent reason)

Well, good is relative. MacOS renders fonts in a weight-and-form-correct way which makes them look blurry however. Windows renders fonts in a weight-and-form-incorrect way, which however makes them sharper and easier to read on screens, especially with resolutions below 200dpi.

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.

Re: Self-host your fonts for better performance

#93

Post by test1235 »

smt88 wrote: post #80
test1235 wrote: post #49

Earlier quoted context omitted.

firefox options -> language and appearance -> advanced -> uncheck 'Allow pages to choose their own fonts, instead of your selections above'

Won't this break the UI of most sites because they (ab)use web fonts to add icons? 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...

for me personally, I've only noticed this problem once, but I can't remember which site that was (must be one I don't visit often), but obviously your browsing habits are different to mine.

I don't see any disadvantages to giving it a try yourself for a while tho' - it's just a single checkbox setting.

Re: Self-host your fonts for better performance

#94

Post by scrollaway »

strangegecko wrote: post #67
scrollaway wrote: post #30

Earlier quoted context omitted.

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,…

> when implemented incorrectly, they massively slow down initial text paint What are you thinking of in terms of "implemented incorrectly", do you happen to have an example?

I can't recall without looking into it, but there's a lot of gotchas when implementing web fonts. You have to ensure it's using fallbacks, that it can use them before the target fonts have loaded, that the fallbacks are close to the web font in style, and there's a bunch of CSS tricks you can use so that a repaint doesn't end up reflowing everything.

Re: Self-host your fonts for better performance

#96

Post by geokon »

franciscop wrote: post #66
geokon wrote: post #47

I'd also point out that Google CDNs don't work in China and make your websites broken for 1/5th of the world's population. (Not to mention your leaking your user's info to Google - which is a dick move..)

They also don't work with, well, Chinese or most of the Asian languages for that matter. Also most of the population in Asia don't consume the web in English. So you are definitely not missing 1/5th of the world just because your fonts don't render the same, you are missing them because of no localization.

If it's your knitting blog then maybe it doesn't matter. It really depends on the content. If you're selling software then it matters. They purchase software licenses like everyone else - so you're losing clients. If it's a code related thing then software developers in China will also look at it just because there is never enough programming resources for obscure issues. They just might not post issues and "engage".

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

Re: Self-host your fonts for better performance

#97

Post by CaptArmchair »

greenkey wrote: post #73
Santosh83 wrote: post #70

The convenience is the major factor. When self hosting, you have to manually take into account stuff like font format, fallbacks for older browsers, preloading considerations, hinting or no hinting, variable or not variable, and manage the (often long) CSS yourself, and keep it updated as browser compatibility and technology changes. Google does all this for you with the inclusion of a single line. But yes, the drawb…

Why hasn’t w3c taken on some way to avoid the unnecessary complexity? (Simplified font definition and usage standard.)

> Why hasn’t w3c taken on some way to avoid the unnecessary complexity?

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.

Re: Self-host your fonts for better performance

#98

Post by krageon »

test1235 wrote: 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…

You'll find that disabling images over 50KB has a similar effect, as does disabling all third-party JS except for a select few CDNs if you're lazy. In the end it's three parts performance to one part online safety.

Re: Self-host your fonts for better performance

#99

Post by test1235 »

throwaway_pdp09 wrote: post #76
test1235 wrote: 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…

As a guy who does this blocking pretty ruthlessly (edit: inc. cookies), I'd like to understand why - I don't take offence at 'sneer', ISWYM but I'd like to understand the other side of the fence. TIA

sorry, 'sneer' is probably a bit strong - it's really just a lack of understanding on my part (of your side of the fence).

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.

Re: Self-host your fonts for better performance

#100

Post by sneak »

_a1_ wrote: post #32
robin_reala wrote: post #24

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.

The worst is when the site is totally blank without it, then you enable it, and there's no interactivity: just images and a few words of text. It was totally unnecessary after all.
Post reply on HN