Step by Step Mengganti/Menambahkan Font Baru pada Template Median UI

Step by Step Mengganti/Menambahkan Font Baru pada Template Median UI
Source: jagodesain.com

Mencari font yang cocok di Google Fonts

Font yang digunakan pada template ini semua diambil dari Google Fonts, jika Anda ingin menggantinya pertama-tama silahkan cari font yang Anda sukai terlebih dahulu. Kami akan anggap Anda sudah mengerti cara mencari font pada Google Fonts karena UI-nya yang sangat mudah dimengerti.

Minta kode embed

Selanjutnya adalah setelah Anda menemukan font yang cocok, pilihlah dan copy code embed yang diberikan. Dalam contoh ini kami ingin menambahkan font baru yang bernama 'Aref Ruqaa' pada template ini.

Ada dua pilihan yang bisa Anda gunakan untuk mendapatkan kode embed, pertama dengan tag <link> dan yang kedua dengan CSS @import, pada tutorial ini kami menggunakan tag <link> dan kode embed yang kami dapatkan adalah seperti dibawah ini:

<link href="https://fonts.googleapis.com/css2?family=Aref+Ruqaa&display=swap" rel="stylesheet">

Penulisan CSS untuk mengubah font family-nya seperti dibawah ini:

font-family: 'Aref Ruqaa', serif;

Menambahkan kode embed ke CSS template

Anda bisa langsung menyalin dan menempelkan kode diatas kedalam tag <head> blog Anda, namun pada artikel tutorial ini kami memilih menggunakan CSS @font-face karena hampir semua browser support dengan CSS ini.

Untuk mendapatkan kode @font-face silahkan salin url yang ditandai pada kode embed diatas dan buka melalui browser Anda, maka akan muncul kode CSS font-face seperti dibawah ini:

/* arabic */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Aref Ruqaa Regular'), local('ArefRuqaa-Regular'), url(https://fonts.gstatic.com/s/arefruqaa/v10/WwkbxPW1E165rajQKDulIIIoVeo5.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}
/* latin */
@font-face {
  font-family: 'Aref Ruqaa';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Aref Ruqaa Regular'), local('ArefRuqaa-Regular'), url(https://fonts.gstatic.com/s/arefruqaa/v10/WwkbxPW1E165rajQKDulIIcoVQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Salin kode diatas dan tempelkan pada kelompok kode CSS pada template Anda, agar lebih mudah tempelkan kode diatas tepat sebelum kode ]]></b:skin>

Font diatas memiliki dua versi yaitu versi arabic dan latin, pada tutorial ini kami akan menggunakan versi latin untuk mengganti font heading dan arabic untuk menambahkan font baru.

Menambahkan font baru

Kasus pertama adalah menambahkan font diatas menjadi font alternatif pada template ini, agar penggunaannya lebih mudah kami menambahkan selector CSS baru agar Anda tidak perlu repot-repot menulis ulang font-family: setiap menggunakan font baru. Sebagai contoh berikut adalah kode CSS yang kami buat untuk memanggil font diatas:

.arabic-font{font-family: 'Aref Ruqaa', serif;}

font-family: diambil dari kode embed pada tahap awal.

Untuk menampilkan font baru dalam laman Anda berdasarkan selector CSS diatas hanya perlu menambahkan atribut class='arabic-font' dalam artikel Anda, contohnya seperti dibawah ini:

<p class='arabic-font'> Disini_isi_tulisan_Anda </p>

Tidak selalu tag <p> anda juga bisa menggunakan tag lain misal <div> dan sebagainya

Hasilnya akan terlihat seperti dibawah ini:

السلام عليكم ورحمة الله وبركاته

Mengganti font bawaan template

Kasus kedua Anda ingin mengganti font bawaan template ini dengan font diatas. Perlu diketahui dalam template ini ada dua font bawaan yang paling sering digunakan yaitu font heading (h1, h2, h3, h4, h5) untuk judul dan sub judul pada artikel serta font body untuk isi artikel. kode pemanggil kedua font ini adalah:

<Group description="Fonts">
<Variable name="body.font" description="Font body" type="font" default="$(fontBody)" value="&#39;Nunito Sans&#39;, sans-serif"/>
<Variable name="heading.font" description="Font heading" type="font" default="$(fontBody)" value="Poppins, sans-serif"/>
</Group>

Sebagai contoh kami ingin mengubah font body dalam template ini menjadi 'Aref Ruqaa' maka yang harus dilakukan adalah mengubah bagian yang ditandai pada kode diatas dengan nama font yang dipilih, hasilnya seperti ini:

<Variable name="body.font" description="Font body" type="font" default="$(fontBody)" value="&#39;Aref Ruqaa&#39;, sans-serif"/>

karena sudah terdapat tanda kutip pada atribut value="..." maka untuk menghindari error, penulisan 'Aref Ruqaa' diubah menjadi &#39;Aref Ruqaa&#39;
Penting!
Jika nama font yang Anda pilih terdiri dari dua kata atau lebih maka penulisannya harus diapit dengan tanda kutip seperti pada kasus diatas nama font Aref Ruqaa memiliki dua kata, contohnya seperti dibawah:
  • Nama font Aref Ruqaa memiliki dua kata maka penulisannya seperti ini: font-family: 'Aref Ruqaa', sans-serif
  • Nama font Poppins hanya memiliki satu kata maka penulisannya seperti ini: font-family: Poppins, sans-serif

Contoh penerapan penggantian font

Ini adalah isi artiel dengan font berbeda sebagai hasil penerapan dari kode diatas, terlihat jelas juga pada sub-judul diatas penerapan font baru di tag heading, silahkan mencoba dan berkreasi sendiri dengan font pilihan Anda. Jika ada pertanyaan seputar font atau ada yang tidak jelas dari tutorial diatas silahkan tulis di kolom komentar postingan ini

BLTemplates