Now I got curious, and there's also a 400 kB CSS file to go with it: https://purplesyringa.moe/fonts/webfont.css

I'm not up to date on web/font development – does anybody know what that does?

It adds unicode characters before elements with the given class. Then it's up to the font to display those Unicode characters — in this case, based on the class names, one can infer that the font assigns an icon to each character used.

That makes sense, thank you!

So the purpose is effectively to have human-readable CSS class names to refer to given glyphs in the font, rather than having stray private use Unicode characters in the HTML?

Yep

This is a reasonable approach if you have a large number of icons across large parts of the site, but you should always compile the CSS/icon set down to only those used.

If only a few icons, and the icons are small, then inlining the SVG is a better option. But if you have too many SVGs directly embedded on the site, the page size itself will suffer.

As always with website optimization, whether something is a good option always “depends”.

I think at least some recent tools will produce ligatures to turn a plain text into an icon to avoid this issue.

Another detail is that this feature breaks and makes some sites nearly unusable if the browser is set to ignore a website's custom fonts.

More reasonable than this class+CSS would be e.g. a React/static-website-template/etc custom element that outputs the correct glyph. The output doesn't need to contain this indirection, and all of the possibilities.

Wow, yeah. That kind of discredits the blog author a bit.

I mean, it's all just for fun of course.

It's cached. Not ideal, sure, and I'll get rid of that bloat someday, but that file is not mission-critical and the cost is amortized between visits. I admit my fault though.

Definitely fair and I was a bit harsh. It just seemed a bit nonsensical to go through such efforts to get rid of a few kilobytes while serving a massive font file. But I also understand that it's mostly for fun :)

As usual, the quickest way to optimize a webpage is to show HN how you tried to do so lol

Definitely a fascinating post though, there were things I’ve not encountered before.

> It's cached.

For who? Not for 99.9% of the people clicking the link here on HN. Even regular visitors of a blog will likely no longer have things in cache for their next visit.

seriously, why can't modern browsers turn off features like remote fonts, webrtc, etc. in settings. I hate when reading a bit then the font changes. Not to say fingerprinting risks.

You can, and then when someone uses an icon font instead of graphics their page breaks.

Skill issue.

Pictures are pictures, text is text. <img> tag exists for a reason.

Its a convenience packaging issue. An icon font is simply more convenient to handle. <img> tags for a hundred images requires more work.

Icon fonts are used all over the place - look at the terminal nowadays. Most TUI's require an icon font to be installed.

><img> tags for a hundred images requires more work.

So it's a skill issue.

I believe many Web APIs can be enabled/disabled on a website basis, no?

iPhone lock down mode turns off remote fonts (including breaking font icons as sibling says)

Even the gzipped page itself could be shrunk by 40-50% by optimizing the inline SVGs.

Just removing the inline duplicated SVGs used for light/dark mode and using styles instead would bring it down 30%. Replacing the paths used to write text (!) with <text> and making most of the overly complicated paths into simple rect patterns would take care of the rest.