[HN Gopher] More than you ever wanted to know about font loading...
___________________________________________________________________
More than you ever wanted to know about font loading on the web
(2021)
Author : Brajeshwar
Score : 110 points
Date : 2022-06-09 13:14 UTC (9 hours ago)
(HTM) web link (www.industrialempathy.com)
(TXT) w3m dump (www.industrialempathy.com)
| dingleberry420 wrote:
| Alternatively, just stop messing with the font. It's not
| necessary, annoys users and takes a lot of work to get right.
| spread_love wrote:
| Big hit to site identity though. Agreed it introduces issues,
| but it's not realistic to think you'll convince Marketing to
| drop all custom typefaces. Used responsibly, they can improve a
| site's appearance without hindering UX.
| bilater wrote:
| That's like saying everyone should dress in plain clothes and
| not waste money on fancy shit. I mean sure...but also not
| really a viable solution.
| lelandfe wrote:
| I know HN can be pretty utilitarian at times, but custom fonts
| are nice. The New Yorker simply would not be The New Yorker
| without their font stack.
|
| It's not that hard to get right (seriously, it should take
| _maybe_ an hour?) and won 't need to be touched ever again once
| you have it in good shape :)
| azemetre wrote:
| If you don't use custom fonts and strictly system fonts, you
| get a lot of performance benefits; which may seem minor, but
| multiple this by tens of millions of people and you're
| talking about a real world climate impact here.
|
| If the choice is between style vs performance, we should
| always default toward performance. Besides many OS's have
| added more system fonts throughout the last two decades. If
| anything we need to encourage OS's to have more interfont
| operability (if that's a word), I don't know the legal
| ramifications (there's gotta be one) but there's no reason
| why the most popular google fonts couldn't be included in
| various OS's.
|
| Obviously I'm not an OS dev, so I'm curious if the
| limitations are purely legal or implementation.
| lelandfe wrote:
| Browsers are actually going the opposite way now, and are
| locking down access to system fonts beyond a standardized
| list: https://wicg.github.io/local-font-access/
|
| This is to prevent fingerprinting of users (adding _new_
| browser-accessible fonts would sadly mean more accurate
| fingerprinting)
| xigoi wrote:
| I'm wondering, would it be possible to add a mechanism
| that would allow JavaScript to get information like the
| list of fonts, but make it impossible to send it
| anywhere? Have the list wrapped in some special type that
| infests everything it touches and things that perform
| requests will refuse to send it.
| azemetre wrote:
| Wow, I had no idea. Thanks for the info but this is
| beyond disappointing.
| PaulHoule wrote:
| I've wondered if Cumulative Layout Shift is more of a feature
| than a bug.
|
| All the time I try to click on something, the layout shifts, and
| I wind up clicking on an ad. Maybe that's how Google can get $50B
| a year in ad revenue but you can't find anybody who admits
| they've clicked on an ad.
| nonameiguess wrote:
| Fat-fingering links on a touchscreen that you have to touch to
| scroll is likely at least as big a factor, but I would hope the
| ad network is able to measure whether a person actually stays
| on the page versus immediately hits the back button and not pay
| for the immediate back buttons.
| egberts1 wrote:
| Yes. This is a problem when trying to speed clicking NEXT
| button, it shifted and it's "AD TIME!"
|
| I am looking at you, Taboola.
| lowercased wrote:
| agreed, but i've found it easier/safer to just back out of
| sites when I see taboola stuff on them in the first place. it
| seems to be an indicator of the (non)quality of many sites.
| jfk13 wrote:
| In my experience, if you're reading something that involves
| constantly clicking a NEXT button, you're generally reading
| garbage anyhow.
| chrismorgan wrote:
| There are various other CSS properties that are linked to the
| font so that the result is bad if another font gets used.
|
| letter-spacing: this has been giving me grief recently. It's
| mostly a tool for people second-guessing the font designer
| because they chose a font that they liked but didn't _actually_
| like because it was too wide, and now they're tightening the
| letter-spacing, but poor people like me who have told their
| browser not to let pages override their font choices1, or those
| for whom the web font just fails to load for whatever reason, now
| have to suffer for it, surprisingly often to the point where
| letters collide (not _often_ in the scheme of things, but
| surprisingly often to me). My opinion is that you should
| _absolutely never_ adjust letter-spacing at body text sizes, with
| the sole exception of all-caps text where it is generally
| desirable to add up to about 0.05em. If you feel the need to set
| letter-spacing on body text in any other situation, you're using
| the wrong font.
|
| font-feature-settings: some OpenType features are generic, like
| _tnum_ for tabular numbers, but others like stylistic sets are
| explicitly linked to a particular font, so that if you set this
| globally in this way, you might actually trigger something in
| another font that ruins things. For example, my monospace is
| Triplicate, and _ss01_ makes it not monospaced (called the Poly
| variant), so if you activate ss01 _and_ were doing box drawing or
| similar, it just got ruined. Or if you're using a version of
| panr's Terminal theme2 for Hugo from more than a few months ago
| (when it got fixed for the wrong reasons, but it got fixed), it
| has the _case_ feature set improperly, which is supposed to just
| adjust vertical positioning of some punctuation to fit all-caps
| text, but in practice a number of font foundries (including at
| least one of the biggest) have decided to work around inferior
| desktop publishing software (leastways, that's why Matthew
| Butterick decided to do it) by making that feature also
| substitute uppercase glyphs--so now the entire page is all caps.
|
| The particularly galling part to me is that there actually _is_ a
| defined way of doing this properly for font-feature-settings,
| scoping by font, but Firefox implemented it in 2014 and no one
| else has touched it. Sigh. /* The current and
| inferior way: */ code { font-family: triplicate,
| monospace; font-feature-settings: "ss01"; }
| /* The new and improved way that Google and Apple haven't
| implemented: */ @font-feature-values triplicate {
| @styleset { poly: 1; } }
| code { font-face: triplicate, monospace;
| font-variant-alternates: styleset(poly); }
|
| I'd really like something better for letter-spacing, too. Maybe a
| letter-spacing-adjust @font-face property or something. I dunno.
|
| --***--
|
| 1 I started doing this a few months back in Firefox as an
| experiment, and I've never gone back--it _significantly_ improves
| the web, with Google's Material Icons web font with its stupid
| ligation technique being practically the only meaningful
| casualty.
|
| 2 Which I hate, by the way--monospaced fonts are generally quite
| bad for long-form reading, and are still more so when presented
| light-on-dark and with excessively wide columns. Do you know just
| _how much_ more readable those sorts of pages become when you
| swap in a serif or sans-serif font? Try reading half an article,
| then swap it and go away for a few minutes so that it doesn't
| feel weird, then come back and read the rest. The effect is quite
| remarkable.
| clairity wrote:
| it's frustrating to see the most relevant and informative
| comment at the bottom while tangential blathering sits at the
| top.
|
| thanks for pointing out that css font settings can be scoped to
| fonts, even if it's firefox only for now.
| wildrhythms wrote:
| I am usually forced to apply some 0.2px or 0.3px letter spacing
| because the designers I work with don't realize that their
| design software renders fonts completely differently than the
| browser, and that added letter spacing in the browser makes it
| 'look right' to them.
| madeofpalk wrote:
| I have never encountered this. What OS/design software does
| this?
| [deleted]
| missblit wrote:
| > browsers no longer cache resources across top level sites.
|
| Wait is this true? Definitely warrants some kind of citation. If
| no one's heard one way or another I might test it later because
| I'm pretty skeptical of this claim.
|
| Edit: mind blown
| robin_reala wrote:
| The reasoning behind this is a privacy leak attack. Let's say
| that you know that, say, your competitor is loading a specific
| asset at a specific version from a CDN. You can then attempt to
| load that asset as well, and using the Resource Timing API[1]
| see how long it takes to come down. If it's 500ms+ you can
| guess that it's a network load. If a lower number you could
| guess that instead it's come from the cache. You could then
| target that user with that new knowledge. Safari realised this
| a long time ago, but it took Firefox and Chrome a while to
| catch up, or at least to decide that the harm outweighed the
| benefit.
|
| [1] https://developer.mozilla.org/en-
| US/docs/Web/API/Resource_Ti...
| bombcar wrote:
| It's true and kind of asinine in my opinion, and actually makes
| setting up a Squid cache worthwhile again, potentially.
| beejiu wrote:
| Yes, it seems like it is now true.
| https://developer.chrome.com/blog/http-cache-partitioning/
| kube-system wrote:
| https://developer.chrome.com/blog/http-cache-partitioning/
| zinekeller wrote:
| Yes, all modern browsers divide their cache per-site. Some
| large advertising companies like Taboola have abused caches to
| store unique identifiers. I won't be shocked if Google and
| Facebook have also used this, so Safari (from 2013,
| https://bugs.webkit.org/show_bug.cgi?id=110269), Firefox
| (depending on settings from 2018 and widely deployed in 2020,
| https://developer.mozilla.org/en-
| US/docs/Web/Privacy/State_P...) and Chrome (from 2020,
| https://developer.chrome.com/blog/http-cache-partitioning/) now
| separate caches.
| everdrive wrote:
| I wonder if there is some way to always block remote fonts? Seems
| like a real bandwidth saver.
| bobbylarrybobby wrote:
| Some adblockers can do this.
| sogen wrote:
| In Chrome, uBlock origin can block webfonts.
| chrismorgan wrote:
| Be sure to block JavaScript as well. Makes the web a lot
| faster, and very often better too, with only the occasional
| site (though considerably more of certain _types_ of sites)
| breaking. What I settled on a couple of years back was to
| disable JavaScript with uMatrix, but have that extension
| disabled in Private Browsing mode, so I can just open a Private
| Browsing window if I want to run something with JS.
|
| In Firefox, you also just have the "Allow pages to choose their
| own fonts, instead of your selections above" checkbox in
| Settings - Fonts - Advanced that you can untick, which will
| stop most web fonts from loading, though Private Use Area code
| points (used in icon fonts) will still work from web fonts (so
| that Google's Material Icons with its stupid ligation technique
| is just about the only thing that will be mangled).
| mmmpop wrote:
| > only the occasional site (though considerably more of
| certain types of sites) breaking.
|
| That is not at all my experience while browsing without JS
| enabled.
| ormax3 wrote:
| uBlock Origin can: https://github.com/gorhill/uBlock/wiki/Per-
| site-switches#no-...
| forgotmypw17 wrote:
| It can be done in Firefox, it is just one setting in
| about:config.
|
| gfx.downloadable_fonts.enabled
|
| Some sites rely on icon fonts for buttons, and they appear as
| Unicode placeholders instead. I don't mind, and consider it a
| time-saving benefit which reduces my effort spent on low-
| quality websites.
| kuharich wrote:
| Past comments: https://news.ycombinator.com/item?id=25976844
| lelandfe wrote:
| And today's discussion, where this came from:
| https://news.ycombinator.com/item?id=31680414
___________________________________________________________________
(page generated 2022-06-09 23:01 UTC)