Custom fonts for Misskey!

Did you know that you can set up custom fonts for Misskey? If you follow our Instagram account, you’ll see some screenshoted posts from the Fediverse from our Misskey instance by using a custom font–that is the same one used on our website.

Misskey, by default, opts using fonts which are cute and optimized for Japanese-speaking people. But unfortunately, the fonts they’re using are not always available on all devices, primarily because of copyright reasons.

If that’s a problem for you, or you just want to use custom fonts including accessibility-friendly ones like OpenDyslexic, you can set custom fonts to be displayed on the website.

This trick would work in most Misskey instances, including misskey.io and misskey.id. But unfortunately, this trick only works per device, meaning that you have to re-configure again when logging on to Misskey from another device or web browser.

To begin, go to your Account Settings and select General. Scroll down until you see the Custom CSS dropdown menu.

From here, you can set up custom CSS to fine-tune how Misskey would look the best for your eyes. CSS itself is a computer language to let you style any websites, and every web developer today should already be familiar with the language.

Well, we use this CSS code to load our custom font, Nacelle, which is then backed with our system font stack as a fallback.

@import url("https://reinhart1010.github.io/nacelle/nacelle.lite.min.css");
body {
  font-family: Nacelle, "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", Cantarell, "Open Sans", "Noto Sans", Piboto, Ubuntu, "Roboto Flex", Roboto, Helvetica, FreeSans, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

And of course, you can use any locally-installed fonts, like

body {
  font-family: "Comic Sans MS";
}

And if you want to use your favorite fonts from Google Fonts instead, you can do so by selecting the font style (Regular, Regular Italic, Bold, and Bold Italic are enough) and copy the CSS @import code, like this:

/* Do NOT include the <style> and </style> tags! */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400;1,700&display=swap');
body {
  font-family: "Poppins", sans-serif;
}