Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Mengganti Jenis Font pada Template VioMagz

Jenis huruf atau font adalah unsur tipografi yang sangat penting dalam sebuah media tulis, baik cetak ataupun elektronik. Seperti yang kita tahu blog juga termasuk media yang isi informasinya kebanyakan berupa tulisan.

Cara Mengganti Jenis Font pada Template VioMagz

Memilih font yang tepat akan membuat pengunjung betah berlama-lama untuk membaca isi konten dari artikel yang kita tulis. Selain itu, font dapat menjadi salah satu ciri pembeda antara blog kita dengan blog lainnya, khususnya jika kita menggunakan template yang sama.

Di tema blogger VioMagz sendiri terdapat font bawaan yang sudah sangat bagus. Font bawaan dari template VioMagz adalah Roboto. Tampilan font tersebut dapat dilihat pada gambar di bawah

Untuk mengganti font bawaan dengan font yang diinginkan, kita bisa melakukan modifikasi CSS.

Di artikel ini, trivusi.web.id akan memberikan tutorial mengenai cara mengganti jenis font pada template VioMagz. Simak ya!

Daftar Isi

Langkah-langkah Mengganti Jenis Font pada Template VioMagz

Adapun langkah-langkah untuk mengubah jenis font pada template VioMagz adalah sebagai berikut

1. Menentukan jenis font

Pada langkah ini kita perlu memilih font apa yang mau kita gunakan. Saya sendiri merekomendasikan font yang disediakan di Google Fonts untuk dipakai. Anda bisa mengunjungi laman Google Fonts di link fonts.google.com 

Di tutorial ini saya akan memilih font bernama Noto Sans (https://fonts.google.com/noto/specimen/Noto+Sans)

2. Menyeleksi ketebalan font

Setelah memilih jenis font selanjutnya klik tombol Select this style di sebelah kanan font. Pilih font dengan ketebalan 400, 500, 600, 700.

Setelah dipilih, klik tombol berbentuk grid di pojok kanan atas, kemudian cek ketebalan font yang sudah dipilih. Pastikan keempat ketebalan tersebut ada.



3. Menambahkan kode ke template VioMagz

Selanjutnya salin kode yang ada dicantumkan pada Google Fonts.

Pada kotak nomor 1 kita melakukan import font dan kotak nomor 2 kita melakukan kustomisasi CSS

Adapun kode lengkap yang akan kita gunakan sesuai petunjuk yang tercantum di Google Fonts adalah seperti berikut:

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
  body {
    font-family: 'Noto Sans', sans-serif;
  }
  </style>

Setelah mendapatkan kodenya, selanjutnya ikuti petunjuk berikut:

  • Buka laman Blogger. Di sidebar sebelah kiri, pilih menu Layout.
  • Klik tombol edit berbentuk ikon pensil pada bagian Custom JavaScript Footer
  • Sisipkan kode yang sudah diperoleh dari Google Fonts
  • Klik Save untuk menyimpan perubahan.

Penutup

Demikianlah artikel mengenai cara mengganti jenis font pada template VioMagz. Semoga bermanfaat.

Jika Anda suka dengan artikel serupa terkait tutorial dan blogging, Anda bisa mengunjungi rubrik Tutorial atau membaca artikel sebelumnya mengenai "Cara Membuat Daftar Isi Artikel Otomatis di Template VioMagz".

Salam!

Trivusi
Trivusi Ikatlah ilmu dengan menulis. Menebar manfaat dengan berbagi :)

Posting Komentar untuk "Cara Mengganti Jenis Font pada Template VioMagz"