Matt Langford

In mostly no particular order. As you can tell, I lean towards WWII, but there are a few exceptions.

• The Nightingale (my favorite)
• The Winds of War
• Eye of the Needle
• An Officer and a Spy
• A Gentlemen in Moscow
• The Alice Network
• The Tattooist of Auschwitz
• The Pillars of the Earth
• The Four Winds
• All the Light We Cannot See

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

(Requires Tiny Theme 1.8 or higher)

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.

Here’s a quick rundown of the Safari Extensions I keep enabled on my devices (iOS, iPadOS, and MacOS).

Wipr

For ad blocking, many people go with 1Blocker, but I prefer Wipr. It’s a no nonsense, install it, and forget it app. 1Blocker is a fantastic app that allows almost limitless customizations and settings. Wipr is a fantastic app that has no customizations or settings. There’s a place for both, but Wipr wins for me.

Baking Soda and Vinegar

Baking Soda and Vinegar are made by the same developer. Together, they change almost every video embed across the internet to use your device’s native video player. This means things like Picture-in-Picture are always available.

Stop the Madness

Stop the Madness essentially fixes broken sites and common annoyances across the internet. See full links instead of shortened URLs, hide banners on common sites, enables autocomplete on sites that have it turned off, stop link trackers, stop videos from auto-playing, and so much more. You can choose settings globally or per site.

There are other apps on my devices that have extensions available, but I have all of those disabled. In addition to Wipr, I use a paid NextDNS account for ad blocking and privacy.