In defense of user-defined web fonts
nutcroft.com
nutcroft.com
These days, I keep web fonts disabled using uBlock Origin, and enable them on a need-basis when sites decide to use web fonts as icons. My favorite glitch is Banggood which somehow fallbacks to show me icons for PHP, Java, and Firefox in the navbar [1] because the glyph matches the file-icons system font somehow.
[0]: github.com/captn3m0/disable-web-fonts
Thanks to variable fonts, you can nowadays get a full typographic palette (including small-caps, italics, all weights from 100 to 900) on a 300KB budget, sometimes less. The article sports an image that’s 170KB, so it’s a question of priorities I guess.
[0] modern browsers actually got good at this, using unicode ranges: https://developer.mozilla.org/en-US/docs/Web/CSS/%40font-fac...
Edit: also, fonts are by default loaded conditionally by browsers.
That’s one of the reasons you typically use a preload to speed things up: otherwise the browser will wait for the first paint following CSSOM construction to know which font faces are used on the page, and thus what to download.
In other words, specifying the 200 @font-face’s possible on a site actually poses no issues - only those fonts actually used will be downloaded.
So I use two weights (regular and bold), each weighing in at 30kb, woff2 only, preloaded in the HTML and served with long-life cache headers. I know that some users have turned off web fonts, but they've chosen that pain. For the other 99%, I just want my blog to look decent.
Then why do designers have them? One would hope browser vendors would select and ship a good set of default fonts, but I suppose that's not the case.
While I'm in the camp of `font-family: serif/sans-serif`, this paragraph strikes me as strange. If you choose a font for your own content on your own website, why would you choose something that doesn't contain all the characters you need?
The fallback problem is most commonly seen on websites that host user contents where the user can upload some character that the website maker hasn't prepared to host.
On a personal site that needs non-Latin characters, you either have to host a big font, or you relinquish control completely by setting `serif` and `sans-serif`. There really isn't much terribleness can happen, unless you mis-configure the language of your page.
I'm in favor of the latter, because when I browse the web as a user, I've seen how many web pages are broken when CJK characters are mixed with Latin alphabet. The only sane way for me is to block all custom fonts on the web. I've configured my OS to display both English and Chinese in a relatively harmonic manner (not a trivial effort on Linux, to be honest), and there's a much better chance that this system works better than whatever the website wants to do.
Once the site is choosing their own font you are probably relying on non-domain experts to do the choosing of the font, probably a developer or designer. These people sometimes will think it works on my system on the language I have tested it on and not think off hand but does it work with all the characters that need to be supported. Thus when your site chooses not widely available fonts or builds their own fonts this is a potential source of bugs.
The bigger issue would be a general forum where people can and do write in any known language. And not only would the site have to support the character sets, the admins would likely have no way of even knowing if the various characters were being displayed correctly let alone if the font had a good readability/seriousness in that script.
Hmmmm, what about downloading webfont package language character sets piecemeal? Load the Greek alphabet if the page needs a greek character, etc. Granted logograms will be pretty heavy, but maybe with some statistical analysis they could be subsectioned into "frequently used together" categories.
> A webfont can be efficiently small if it includes characters only for the latin script. But what if I want to write Greek? Or Korean? Or Tamil? Something semi-terrible happens then.
Okay, but you know the characters you need for your website. My web site is probably never going to have anything but Latin characters (I'll get back to that "probably" in a moment). This article doesn't, either. "But what if your web site displays user-generated content, smart coyote," you say. Well, then, don't use a webfont. Or, possibly, consider that probably, which leads me to
> But, terribleness will strike when the style of the fallback font is completely different from the style of the primary font. You can see an example of said terribleness here.[1]
While that example is indeed terrible, it's also deliberately terrible, which is a rather important point the article elides! The example loads Source Code Pro as the main font but subsets only a few letters from it, then sets the fallback font to be Impact. This is being done as a deliberate contrast to the example right above it, which sets a much more reasonable fallback font stack.
And, now we're at that "probably": as the web designer/developer, you're the one setting the fallback stack for your fonts! If "terribleness strikes" because "the style of the fallback font is completely different from the style of the primary font," well, don't set Impact to be the fallback font for Source Code Pro.
I would argue the author absolutely can show everyone the beauty of Century Supra or EB Garamond if they so choose to, because they're writing in the Latin-1 subset of characters. You can't show off the full range of EB Garamond's character set without increasing the initial download size, but you could use a subset of it combined with fallback fonts which include other characters and don't have completely different styles.
(Of course, you could also specify "font-display: fallback" or "font-display: optional" and just send the full font along with your well-chosen fallback font stack.)
[1]: https://css-tricks.com/css-basics-fallback-font-stacks-robus...
author-defined fonts: goof for art
I lean towards defining a font stack for this reason.
It would be nice if there were a way to specify user-defined font vs. default font in CSS so something like
font-family: user-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif;
So in many cases where I'm building a website for a brand where they have lots of icons that need to scale, I create a font with the outlines of all their icons.
This is great for lots of reasons. The employees at the company can use the font when they need to drop in a corporate icon into a blog post. I can then maintain a repository for the font and the company can use those vector icons anytime in simple documents.
So yeah, user-defined web fonts are the shizz.
She points out a few failure cases with icon fonts, like 1) uninterpretable by screen readers for the blind, and 2) don't work well for dyslexic people who have configured their browser to use specialized fonts that are easier to read.
How do you handle these cases?
Tl;dr, fonts are just a fantastic way to bundle lots of vector files on a per-client basis. Plus most clients feel super special and cool that they have their own font!
And the tech we use is old. Old. We maintain these in FontForge, which is a Mac X11 app.
What vector format should have replaced it? I personally think the W3C should just have accepted VML, not because I think it is better but because it was already widely supported (IE, and with a little work Netscape on Windows) so at the time it would have taken less work to get Vector graphics (for Netscape to add support on other platforms). But then I am more a bazaar type of person than a cathedral type.
on edit: when saying maybe it's the use of the slang it's just to indicate my general feeling that HN downvotes are an insoluble mystery, even someone as wonderful as I gets downvoted at times, and is that fair? The answer is no, it sure isn't.