Menambahkan Font Menarik pada CSS

Jumat, 4 Mei 2018 | 09:44

Bosan dengan tampilan web yang itu-itu saja? Yuk Simak tutorial sederhana bagi pengguna css pemula untuk mengganti tampilan font yang akan ditampilkan pada web yang kalian kelola. Langkah ini juga menjadi alternatif bagi kalian yang belum hafal nama-nama font default yang tercantum dalam style pada sebuah class css.

Pada Tutorial kali ini ini, kita akan menggunakan google fonts. Pada mesin pencarian, silahkan ketikan kata kunci tersebut. Biasanya hasil akan menampilkan laman yang kita tuju pada urutan teratas. Tetapi sebelumnya siapkan terlebih dahulu file index untuk tampilan muka dan style.css pada folder tersendiri supaya memudahkan pengguna pada pemanggilan.

Setelah google fonts menampilkan beberapa fonts menarik yang ditawarkan, pengguna bisa memilih font tersebut dan dapat digunakan secara free. Pilih dengan menekan tanda + pada tepi atas bagian fonts yang dikehendaki.

Pada tampilan gambar di samping terdapat 2 kode yang bisa disisipkan dalam file index dan style.css. Silahkan salin tulisan yang terdapat dalam kolom kode bagian atas atau tulisan <style>……..</style> kedalam file index tepat di dalam komponen <head>…….. </head>. Dan salin pula kode yang ada pada bagian “Specify in CSS” ke dalam file style.css. Deklarasikan kode tersebut dalam suatu class, misal sebagai class “font”. Jangan lupa tambahkan syntax pemanggilan file css ke dalam index agar font menarik ini dapat ditampilan.

Untuk lebih detail silahkan cek gambar berikut :

style.css

file index

Pengguna pun dapat melakukan modifikasi misalnya untuk ukuran font, dengan menambahkan properti font-size dan isikan value nya misal 70px pada class font. Untuk hasilnya dapat dilihat pada gambar berikut :

tampilan pada browser

Selamat mencoba ….

© 2014 Unit Pelaksana Teknis TIK. All rights reserved.
LOGIN | SITEMAP