Cadey is coffee
<Cadey> Hello! Thank you for visiting my website. You seem to be using an ad-blocker. I understand why you do this, but I'd really appreciate if it you would turn it off for my website. These ads help pay for running the website and are done by Ethical Ads. I do not receive detailed analytics on the ads and from what I understand neither does Ethical Ads. If you don't want to disable your ad blocker, please consider donating on Patreon or sending some extra cash to xeiaso.eth or 0xeA223Ca8968Ca59e0Bc79Ba331c2F6f636A3fB82. It helps fund the website's hosting bills and pay for the expensive technical editor that I use for my longer articles. Thanks and be well!

Site Update: New Fonts

Read time in minutes: 10

Hey all! You may have noticed things looking a little different on the site. I have finally decided to adopt a custom font family for my blog. Unless your browser overrides the fonts that websites use, you are likely looking at the first attempt at the Iosevka Iaso font family. This is a custom version of the Iosevka font that I designed for my online brand image. It includes three fonts that serve different purposes:

  • Iosevka Aile Iaso - screen prose, sans serif
  • Iosevka Curly Iaso - code and terminals
  • Iosevka Etoile Iaso - screen titles, printed text, has serifs

I'm happy with the results so far and I am going to continue to do research and design work to make this better. In the future I plan to extend the set with a variant optimized for dialogue.

hero image park-drawing
Anything -- 1girl, light green hair, green eyes, black hoodie, long hair, outdoors, seattle, picnic table, wearing headphones, sketchpad, drawing, pondering, ponytail, space needle

Cadey is enby
<Cadey> I also made the base font on the webpage a bit bigger. Let me know if this is too big!


Mara is hmm
<Mara> I don't get why you'd need your own font though. Why aren't system fonts good enough?

In general, my website used to look inconsistent across different platforms. I had optimized things for macs with the Menlo typeface as the default view of my website. This has worked for a long time, and most of my readers use macs anyways. However, I've been wanting to do a design refresh on this blog for a while and haven't really found a good stepping stone into it.

Plus, it looks really weird to use a non-fixed-width font on this website. It looks really out of place and jarring. The fact that so much of my brand design is centered around monospace fonts really makes it hard to change anything without making everything look annoyingly different. The fact that the CSS I use assumes the use of a monospace font certainly doesn't help either.

Monospace fonts are also very bad for prose. My blog has lots of prose. This is a problem. I've had dyslexic friends of mine lament that my blog's monospace font makes it harder to identify the shapes of words, and some have gone as far as using their browser to override everything to their chosen easy to read font. This probably needs to be fixed.

At the same time, if I make something like this, I want to be able to create an opinionated set of fonts that I can easily plug into other projects besides this blog. This would allow me to have things look consistent across browsers, projects, and even print media. I've never really had a "brand design" per se, and I want to experiment with this to see if I can get something that I like.

I think I have created a large part of that with the Iosevka Iaso font family. The Iosevka Aile Iaso font is quasi-proportional, meaning that it looks something halfway between a proportional font like I'd like to have and the monospace font that I used to have. This should hopefully make the transition less jarring.

Implementation details

The core of the implementation of this font is thanks to the Iosevka font being customizable. If you've never done it before, take a moment to play around with the customizer. It's nuts. You have so much control over what the font does and how every letter is rendered. Want ligatures? You can pick the set you want. Want the T to look different? You can do that.

These build settings are even exposed to Nix, so you can make something like my iosevka flake and then have that get cached around so other projects can pull it in as a flake input. This allows me to pull in the new font changes and feel confident that things are consistent. This ends up making the dependency graph look something like this:

Everything pulls from the iosevka flake, so making a change there will percolate out to everything else.

One of the difficulties I ran into at first was the fact that Iosevka supports so many characters. Each one of the .ttf files in the Iaso family is over a megabyte. At some level, this is really great for all of my other production work. I can use this on slides and in my editor while remaining fairly confident that I'll be able to see everything I need to.

This is not so great for websites though. Even with .woff2 compression of the fonts, it still added up to something like 500 KB per font family. With up to three fonts per page, this means that I would be wasting about 1.5 megabytes of egress data per user with characters that my blog will never have.

Thanks to some meddling courtesy of iliana, I found a command that lets me squish the fonts down to the bare minimum: pyftsubset. I use it to remove most of the characters in the web-optimized fonts with this command:

pyftsubset \
    $ttf \
    --output-file="$name".woff2 \
    --flavor=woff2 \
    --layout-features=* \
    --no-hinting \
    --desubroutinize \

This giant block of text takes a input .ttf file generated by Nix and then removes most of the characters in it except the ones needed for programming, English, Extended Latin, French, German, Italian, and I believe Swedish. This should cover all of the letters I need. This command squashes down the .woff2 files from 500 KB to about 12 KB and change, making my fonts about as large as the conversation snippet stickers.

Aoi is cheer
<Aoi> Wow! That's small!

I think that this will allow me to get the benefits of a consistent design across my websites while I work on a more comprehensive rethinking of my blog's and Xess' design to allow for an easy to maintain, integrate, and reason about font experience.


If you want to use this font family for some reason, add this to your HTML <head> section:

<link rel="stylesheet" href="" />

Or this to your CSS:

@import url(;

From here you should attach the fonts to their "default roles" such as by doing this:

body {
  font-family: "Iosevka Aile Iaso", sans-serif;
  font-size: 16px;

code, pre {
  font-family: "Iosevka Curly Iaso", monospace;
  font-size: 14px;

h1, h2, h3, h4, h5, h6 {
  font-family: "Iosevka Etoile Iaso", serif;

I'd suggest setting the base font size to be 16px, as that seems to be the best balance of text density and readability. Code can be a smidge smaller, but be sure to balance things so that it's not uncomfortable to read. Comfort is key.


These fonts aren't perfect yet, here's my short list of things to change when I figure out how:

  • The fonts are very vertical and not horizontal. This is fine for many people, but this can be a readability issue for others.
  • I would like to add my sigil to the font as a custom icon. I need to figure out how to do this.
  • I need to do a more detailed study of how people with dyslexia can read this font. I have a very mild level of dyslexia, but I can read this just fine. More information is required.

Overall I'm quite happy with the results so far. It's nice to have a custom font that I can call my own. I'm going to iterate on this like the rest of my projects and hopefully I'll have something more exciting to show off in the near future.

Cadey is coffee
<Cadey> Holy crap, font terminology is pretentious sounding as all hell. You have to worry about ligation, investigate specimens, and all that jazz. It's a lot to take in.

This article was posted on M03 19 2023. Facts and circumstances may have changed since publication. Please contact me before jumping to conclusions if something seems wrong or unclear.

Series: site-update

Tags: font design CSS woff2

This post was not WebMentioned yet. You could be the first!

The art for Mara was drawn by Selicre.

The art for Cadey was drawn by ArtZora Studios.

Some of the art for Aoi was drawn by @Sandra_Thomas01.