Search

Reinhart Previano K.

Do you love to Ctrl-K, Ctrl-/, or / ? Now you can do three of them (>_ )!

No results so far...

6 February 2023

Custom fonts for Misskey!

Share Copy Link Print PDF Embed Share to Email Share to SMS Yahoo! Share to Yahoo! Mail Mastodon Share to Mastodon Share to KakaoStory Messenger Share to Messenger Pocket Share to Pocket Flipboard Share to Flipboard Pinterest Share to Pinterest Reddit Share to Reddit Y Combinator Share to Hacker News Odnoklassniki Share to Odnoklassniki Blogger Share to Blogger Pleroma Share to Pleroma Share to Friendica Share to KakaoTalk 1Artboard 1 copy 2 Share to Snapchat Xing Share to Xing Share to Misskey LINE Share to LINE Evernote Share to Evernote WhatsApp Share to WhatsApp LiveJournal Share to Livejournal Diaspora Share to Diaspora Share to Gmail Threads Share to Threads Threema Share to Threema Share to X Tumblr Share to Tumblr Buffer Share to Buffer LinkedIn Share to LinkedIn Mail.Ru Share to mail.ru VK Share to VKontakte Trello Share to Trello Facebook Share to Facebook Skype Share to Skype Hatena Bookmark Share to Hatena Bookmark! Twitter Share to Twitter Telegram Share to Telegram WordPress Share to WordPress.com

Embed

This website supports oEmbed. To quickly use oEmbed, just copy this site's link to your oEmbed-supported apps and websites like WordPress.

Alternatively, copy and paste the HTML code below to embed this post in your website.

($_ )! We have made this thing responsive, but recommend at least 512x512 pixels for best results.
<iframe src="https://reinhart1010.id/blog/2023/02/06/custom-fonts-for-misskey?embed" height="512" width="512" style="border:none;"><a href="{{ $canonical }}">https://reinhart1010.id/blog/2023/02/06/custom-fonts-for-misskey</a></iframe>
Preview
Cover image for 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.

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";
}

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;
}
Share Copy Link Print PDF Embed Share to Email Share to SMS Yahoo! Share to Yahoo! Mail Mastodon Share to Mastodon Share to KakaoStory Messenger Share to Messenger Pocket Share to Pocket Flipboard Share to Flipboard Pinterest Share to Pinterest Reddit Share to Reddit Y Combinator Share to Hacker News Odnoklassniki Share to Odnoklassniki Blogger Share to Blogger Pleroma Share to Pleroma Share to Friendica Share to KakaoTalk 1Artboard 1 copy 2 Share to Snapchat Xing Share to Xing Share to Misskey LINE Share to LINE Evernote Share to Evernote WhatsApp Share to WhatsApp LiveJournal Share to Livejournal Diaspora Share to Diaspora Share to Gmail Threads Share to Threads Threema Share to Threema Share to X Tumblr Share to Tumblr Buffer Share to Buffer LinkedIn Share to LinkedIn Mail.Ru Share to mail.ru VK Share to VKontakte Trello Share to Trello Facebook Share to Facebook Skype Share to Skype Hatena Bookmark Share to Hatena Bookmark! Twitter Share to Twitter Telegram Share to Telegram WordPress Share to WordPress.com

Embed

This website supports oEmbed. To quickly use oEmbed, just copy this site's link to your oEmbed-supported apps and websites like WordPress.

Alternatively, copy and paste the HTML code below to embed this post in your website.

($_ )! We have made this thing responsive, but recommend at least 512x512 pixels for best results.
<iframe src="https://reinhart1010.id/blog/2023/02/06/custom-fonts-for-misskey?embed" height="512" width="512" style="border:none;"><a href="{{ $canonical }}">https://reinhart1010.id/blog/2023/02/06/custom-fonts-for-misskey</a></iframe>
Preview
Copyright © Reinhart Previano K. | Privacy Policy