Pakai Font Kustom di Misskey dari Google Fonts

See at my main website here

Artikel ini sebagian disadur dari artikel milik Reinhart Previano Koentjoro.

Beberapa waktu lalu, fediverse sempat dilirik oleh beberapa orang pasca Elon mengumumkan beberapa hal di Twitter mengenai pembaruan hal-hal aneh di situs burung biru itu. Wajar sih ya, orang merasa panik dan segera jaga-jaga mencari pengganti sebelum Twitter benar-benar hancur, walau sebenarnya hal ini masih nggak mungkin terjadi dalam waktu dekat, seperti yang aku sempat bahas kemarin di podcast pekan lalu.

Instansi fediverse yang sempat diomongin dalam kurun waktu seminggu kala itu adalah Misskey, dan buat kamu yang pertama kali pakai Misskey, entah di Misskey.io, Misskey.id, atau di instansi Misskey lainnya pasti merasa belum nyaman karena font bawaan di Misskey ditujukan untuk pengguna yang menggunakan bahasa Jepang dan lebih optimal untuk menampilkan tulisan dalam bahasa Jepang. Mengingat Misskey ini dikembangkan oleh pengembang yang berbasis di Jepang. Lalu font yang dipilih tidak selalu sama di setiap perangkat mungkin karena masalah hak cipta.

Tetapi jangan salah, kamu masih bisa mengubah font di Misskey sesuka hatimu dengan memanfaatkan penyunting CSS yang sudah ada di pengaturan Misskey kamu. Dengan memanfaatkan fitur ini, kamu bisa mengubahsuaikan tampilan Misskey kamu di semua perangkat dan browser yang kamu gunakan tanpa harus menggunakan ekstensi tambahan.

Sebelum memulai, CSS atau Cascading Style Sheets adalah bahasa pemrograman untuk mengatur tampilan halaman web, memisahkan tampilan dari struktur dasar halaman HTML sehingga pengembang dapat dengan mudah mengubah gaya situs secara keseluruhan. Misskey juga merupakan situs web yang menggunakan HTML dan CSS. Dengan adanya editor CSS di Misskey, kamu bisa mengubah tampilannya sesukamu, termasuk font yang digunakan.

Sekarang, kita coba untuk mengubah font di Misskey.

  1. Buka Settings/Pengaturan.
  2. Kemudian di Client Settings/Pengaturan Klien.
  3. Buka bagian General/Umum.
  4. Gulir ke bawah sendiri, ketuk bagian Custom CSS.
  5. Di sini ada kotak dimana kamu bisa memasukkan kode CSS sesukamu, salah satunya untuk mengubah font.
  6. Kamu bisa menggunakan font apapun, dan di contoh ini, aku menggunakan font Inter dengan ukuran 1.2em.
  7. Kalian bisa menggunakan kode CSS yang sudah aku gunakan di bawah ini, atau kalian bisa mengikuti poin di bawah dahulu untuk memilih font lainnya dari Google Fonts di langkah-langkah yang berikutnya.
  8. Kemudian ketuk Save. Kamu akan disuruh untuk muat ulang halaman dengan mengikuti langkah selanjutnya.
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
body{
font-family: 'Inter', sans-serif;
font-size: 1.2em;
}

Jika kamu menginginkan font Inter, kamu bisa memilih font lainnya dari Google Fonts.

  1. Buka Google Fonts. Cari Inter di kolom Search fonts. Kemudian ketuk pada pilihan font Inter.
  2. Gulir ke bawah, dan cari varian bernama Regular bila ada banyak varian dan agar mudah terbaca.
  3. Kemudian ketuk tombol View selected families bertanda tiga persegi dan satu tanda plus.
  4. Pada bagian Use on the web, pilih pilihan @import.
  5. Salin semua teksnya dengan menekan tombol salin.
  6. Pada kotak di halaman Custom CSS tadi, tempelkan kodenya.
  7. Hapus bagian <style> dan </style>
  8. Kemudian tambahkan kode di bawah ini sesuai dengan nama font yang diambil tadi, yaitu Inter.
  9. Kamu bisa menambahkan atribut font-size bila font-nya kurang sesuai keinginanmu.
  10. Kemudian ketuk Save. Kamu akan disuruh untuk muat ulang halaman dengan mengikuti langkah selanjutnya.
/* hapus <style> dan </style> */
<style>
  @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
</style>
/* tambahkan ini di bawahnya */
body{
font-family: '(nama font)', sans-serif;
}
/* tambahkan ini untuk ukuran font */
font-size: 1.2em;

Font di Misskey kamu sekarang sudah lebih mendingan daripada sebelumnya. Kamu juga bisa menggunakan font lainnya yang tersedia di Google Fonts bila kamu masih belum menemukan font yang tidak sesuai keinginanmu.