When I started developing Tiny Theme, I set out with goals of (1) accomplishing everything without scripts, (2) make it as light as possible, and (3) use as few media queries as possible. To date, Tiny still has zero added scripts, is very light, and uses only 1 media query (to enable dark mode). However, shortly after releasing the theme, it became apparent that people wanted font choices. How could I enable that without adding any scripts or additional weight to the theme?

Going this route limited me to using system fonts. My first inclination was to leave the theme as is and allow users to decide if and how they wanted to customize font stacks (something you can still do). But with more requests, I realized a lot of people would prefer to have built-in options.

While attempting to build out my own capable font stacks, I came across Modern Font Stacks. It is a collection of pre-defined font stacks (with fallbacks) that have almost perfect cross compatibility with different browsers and systems. It was an easy choice to build off their work.

The next hurdle was deciding how to allow Tiny Theme users to select fonts. I could build in a sort of font selector dropdown, but that would require a settings page (which has certain Micro.blog hurdles) that could stand in the way of future updates. I also considered a separate plugin to enable the feature, but decided that was unnecessary.

Ultimately, I decided to integrate the font family choices directly into Tiny Theme. You can use Micro.blog’s built-in Custom CSS options to choose your preferred font stack from Modern Font Stacks. Visit their site for quick visual aids.

How to Use

  1. Go to Edit CSS in your Micro.blog Design Settings
  2. Add the following code:
body {
    font-family: var(--font_system_ui);
}

The code snippet above is the default setting. To change your font stack, you can choose from the following options:

  • --font_system_ui
  • --font_transitional
  • --font_old_style
  • --font_humanist
  • --font_geometric_humanist
  • --font_classical_humanist
  • --font_neo_grotesque
  • --font_monospace_slap_serif
  • --font_monospace_code
  • --font_industrial
  • --font_rounded_sans
  • --font_slab_serif
  • --font_antique
  • --font_didone
  • --font_handwritten

For example, you could use:

body {
    font-family: var(--font_old_style);
}

If you’re familiar with web inspectors, you can easily cycle through the options to see a live preview on your site.

Target Specifics

The above example will change the fonts used on the entire site, but you may also prefer to target certain elements. This can easily be done in a very similar way. Let’s say you’d like to only change the font for Headers, here’s how:

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font_industrial);
}

Dealing with Font Weights

Some fonts have heavier and lighter weights by default. If you like a certain font choice, but think the implementation is too light or too heavy/bold, you can experiment with different weights. Modern Font Stacks gives you your options, but here’s an example specific to Tiny Theme.

body {
    font-family: var(--font_antique);
    font-weight: 100;
}

Backwards Compatibility

If you’ve previously changed your font in another way, this won’t break it. It’s only a simpler way to switch fonts to pre-defined stacks for those who want it.