If you are using text, you can’t know which font will be used. There are no universally-available fonts, so web fonts are the closest you get, but they could fail to load for various reasons, and it’s honestly more common than people allow for. You can also block web fonts (e.g. uBlock Origin has an entire button for it), or just turn off font selection altogether, in Firefox via Settings → Fonts → Advanced → untick Allow pages to choose their own fonts, instead of your selections above. I did this four years ago as an experiment and have never gone back because it made the web so much better (I did switch back for one week a couple of years ago to convince myself the web really was that awful without it). Not many people will do this deliberately, but it is a thing.
Combined with em-based sizing I’ve found this to be pretty robust. Just because you can’t make it perfect for all users doesn't mean you can’t do the work to improve it for many.
<style>
@font-face {
src: url(data:application/font-woff2;charset=utf-8;base64,...) format('woff2');
}
Your page loading times will obviously take a hit, but that'll give you pretty close to 100% certainty that the font will be used, should you want that.Aside, pairing application/font-woff2 with charset=utf-8 makes no sense. It’s a binary encoding.
But I think you’d still be surprised how many browser configurations don’t load web fonts, though I’m sure it’s becoming less common.
I also started writing a simple responsive SVG charting library[2], but the author is right in that there are some fluid layouts that are just impossible to realise with SVG at the moment.
[1]: https://poll.lowyinstitute.org/report/2024/global-powers-and...
[2]: https://stephenhutchings.github.io/shown/