4 ms·
Well, that, and there's an 850K Symbols-2048-em%20Nerd%20Font%20Complete.woff2 file that sort of drowns out the difference, at least if it's not in cache.
by edflsafoiewq 2y ago
Well, that, and there's an 850K Symbols-2048-em%20Nerd%20Font%20Complete.woff2 file that sort of drowns out the difference, at least if it's not in cache.
- lxgr 2y agoNow I got curious, and there's also a 400 kB CSS file to go with it: https://purplesyringa.moe/fonts/webfont.css https://purplesyringa.moe/fonts/webfont.css I'm not up to date on web/font development – does anybody know what that does?
- bobbylarrybobby 2y agoIt 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.
- lxgr 2y agoThat 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?
- lobsterthief 2y agoYep 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”.
- lifthrasiir 2y agoI think at least some recent tools will produce ligatures to turn a plain text into an icon to avoid this issue.
- alpaca128 2y agoAnother detail is that this feature breaks and makes some sites nearly unusable if the browser is set to ignore a website's custom fonts.
- yencabulator 2y agoMore 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.
- deleted 2y ago[deleted]
- marcellus23 2y agoWow, yeah. That kind of discredits the blog author a bit.
- edflsafoiewq 2y agoI mean, it's all just for fun of course.
- purplesyringa 2y agoIt'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.
- marcellus23 2y agoDefinitely 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 :)
- Modified3019 2y agoAs 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.
- account42 2y ago> 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.
- deleted 2y ago[deleted]
- est 2y agoseriously, 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.
- BugsJustFindMe 2y agoYou can, and then when someone uses an icon font instead of graphics their page breaks.
- Dalewyn 2y agoSkill issue. Pictures are pictures, text is text. <img> tag exists for a reason.
- lenkite 2y agoIts 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.
- Dalewyn 2y ago><img> tags for a hundred images requires more work. So it's a skill issue.
- est 2y agoI believe many Web APIs can be enabled/disabled on a website basis, no?
- collinmanderson 2y agoiPhone lock down mode turns off remote fonts (including breaking font icons as sibling says)
- Aloisius 2y agoEven 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.