How To Change Your Micro.blog Font (To Display Multiple Languages)

With websites hosted on Micro.blog, you can edit the default themes by adding custom CSS. Here’s how I edited my CSS so that my website would properly display ancient Greek and Hebrew as well as English. You can use this as starting point to take your website’s typeface in any direction.

First, I chose a Google Font that could handle all three languages in regular, bold, and italic. After a bunch of testing, I learned that there are only two options that do this well: Arimo (sans-serif) and Tinos (serif).

Then, to overwrite the default font settings, I simply pasted the code below for Tinos to the top of my CSS, clicked Update CSS, and I was done!

In case you prefer Arimo, I’m including the code below. And if you don’t care about Greek or Hebrew and simply want to change to another font, you can generate your own code from a host of choices at fonts.google.com.

For Arimo

@import url("fonts.googleapis.com/csshttps://fonts.googleapis.com/css?family=Arimo:400,400i,700&subset=greek-ext,hebrew,latin-ext");

body {
  font-family: Arimo, sans-serif;
}

For Tinos

@import url("fonts.googleapis.com/csshttps://fonts.googleapis.com/css?family=Tinos:400,400i,700&subset=greek-ext,hebrew,latin-ext");

body {
  font-family: Tinos, serif;
}

Update: The original code I posted did not use double quotes around the url. This created an invalid url and caused the browser to default to a system font. The code works properly now.

Christopher Chelpka @christopherchelpka