Cara Custom Font Style di SCSS

Handri Hermawan
2 min readSep 27, 2022

--

Font Family Nunito
https://www.figma.com/google-fonts/nunito-font-pairings/

Memilih jenis font yang sesuai dengan tema atau materi halaman web atau blog merupakan hal yang penting agar pengunjung merasa nyaman dan halaman web kita pun jadi tampak lebih menarik dan nyaman untuk dibaca. Ada beberapa opsi untuk menentukan pemilihan font misalnya langsung menggunakan https://fonts.google.com. Tetapi dalam kasus kali ini kita akan menggunakan CSS dan menentukan font apa yang akan kita gunakan.

Untuk mengubah font di CSS kita menggunakan property @font-face dan font-family. pada contoh kali ini kita akan menggunakan font Nunito Sans. Font bisa di download disini.

Pertama kita akan mendefinisikan folder yang akan kita buat. Buat folder pada ./src/fonts dan letakkan file font yang sudah kita unduh sebelumnya.

font source
Font Family

Kemudian kita panggil font family diatas menggunakan property @font-face berikut. Buat file pada folder ./src/scss/foundation/_font-family.scss

Font Face

Selanjutnya kita definisikan ukuran berapa saja yang akan kita gunakan untuk font yang kita buat dengan cara menambahkan file variable berikut ./src/scss/variables/_font-size.scss

Font Variable
Font Size Variable

Setelah mendefinisikan font size yang akan kita gunakan selanjutnya kita akan menggenerate font size yang telah kita buat dengan cara mixins berikut. Buat file mixins pada folder ./src/scss/mixins/_font-family.scss

Mixins Font Family
Mixins Font Family

Jika proses mixins berhasil maka kita bisa melihat beberapa font size yang telah kita buat sesuai dengan apa yang sebelumnya telah di definisakn di dalam font variable. Hasilnya sebagai berikut

Font Family Class
Font Family Class

Oke cukup sekian pembahasan cara membuat custom file menggunakan scss, kalian bisa menggunakan font family yang lain sesuai kebutuhan web atau blog. Jika ada pertanyaan atau lainnya bisa tanyakan di kolom komentar.

Terimakasih

--

--

Handri Hermawan

Website Performance | Design System | Frontend Developer