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.

Original source: https://bots.reinhart1010.id/notes/98toa1iab2

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.

Yep, that bottom one!

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"; }
Code language: CSS (css)

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

body { font-family: "Comic Sans MS"; }
Code language: CSS (css)

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; }
Code language: CSS (css)

Thanks for reading this article! By the way, we’re also working on finishing these interesting posts. Revisit this site soon or follow us to see them once they’re published!


Leave a Reply

Your email address will not be published. Required fields are marked *

🆕 Webmentions

👋 This website supports Webmentions and WordPress Pingbacks, which is great because your website can be notified if someone else is sharing your content.

📝 That said, not every website supports this feature. If you have shared something from us and want your website to be listed here, feel free to add your link here. You can also add the same link if your content was updated or deleted.