Dalam contoh ini, kita akan menggunakan Google Font sebagai pustaka huruf yang akan dipakai. Untuk menggunakan huruf pilihan Anda ke dalam JustApp, setidaknya terdapat 2 cara yang bisa dilakukan.
1. Input nama huruf melalui menu Design
Untuk menambahkan jenis huruf menggunakan cara yang pertama, kita harus menginput nama dari huruf yang akan digunakan. Sebagai contoh, huruf Poppins. Silakan masuk ke menu Design - Choose Your Font Family pada editor Anda. Silakan isi nama huruf pada kolom Custom font dan akhiri dengan menekan tombol Save. Jika ingin mengembalikan huruf menjadi ke bawaan sistem, klik Reset Font.
Catatan: Kadang-kadang ada beberapa jenis huruf yang tidak bisa diterapkan dengan cara ini.
2. Import library huruf melalui menu Colors - Advanced Customization CSS/SCSS
Cara kedua ini bisa dilakukan dengan cara masuk ke library Google Font - cari dan pilih jenis huruf yang akan dipakai, pilih + Select this style. Jika sudah terpilih, klik icon kotak pada bagian kanan atas halaman (View your selected families). Pada bagian Use on the web di sidebar bagian kanan yang muncul pilih import. Selanjutnya, silakan kopi baris kode yang ada di dalam tag style.
Sebagai contoh:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
Tempatkan baris kode di atas ke menu Colors - Advanced Customization CSS/SCSS pada editor Anda. Selanjutnya, untuk menerapkan huruf terpilih ke dalam aplikasi, silakan buat kode seperti di bawah ini.
* {
font-family: 'Poppins', sans-serif;
}
Tanda bintang (*) memiliki arti “Tidak terdefinisikan”. Jadi, semua elemen di dalam aplikasi akan menggunakan model huruf yang sama.
Jika terdapat bagian aaplikasi yang hurufnya tidak berubah sesuai dengan huruf pilihan Anda, mungkin perlu menambahkan kata !important di belakang nama huruf.
* {
font-family: 'Poppins', sans-serif !important;
}
Jika masih tidak berubah, terapkan huruf dengan cara menyebut tag yang spesifika meuju ke bagian tulisan yang belum berubah tersebut. Contoh:
p, h1, h2 {
font-family: 'Poppins', sans-serif;
}
Baris kode di atas akan menerapakan jenis huruf Poppins ke semua tag p, h1, dan h2 aplikasi Anda.
Selamat mencoba
