Berbicara sedikit tentang fonts external atau yang biasa disebut dengan Custom Fonts, adalah jenis tulisan yang berbeda dari font Default milik browser yang memiliki berbagai fariasi. Contohnya adalah seperti
Lorem ipsum dolar si dawet, consectetur adipisicing si pelit, sad do re mi fa eit unmod lempar sana lempar sini incididunt ut labore et dolore et kasire et indire magna akuilah. Ut enim ad minim caina cau, quis nonstop exercitation ullamco laboris sisi atas sisi bawah ex ea ada comodo tersesat. Duit ente kayak color in jemuran in atap in everywhere velit amat minta dolore lu fugiat nullar penyakit. Excepteur sint occaecat ada nona proident, sunt in curi que di office deket rumah pelit anim id est laborum autis.
Contoh dengan font Vampiro One, oleh Riccardo De Franceschi .
Langkah Pertama, anda disarankan untuk Membuat font ataupun memilih jenis Font di Google web fonts, Klik
Setelah anda selesai memilih, kliklah bagian Quick Use.
Kemudian, anda akan disuguhi beberapa Option, Scroll Down page dan temukanlah deret kode Link.
Langkah Kedua, Integrasikan font pada CSS anda.
perubahan font akan terlihat apabila anda integrasikan pada deret CSS, contohnya seperti ini:
Lorem ipsum dolar si dawet, consectetur adipisicing si pelit, sad do re mi fa eit unmod lempar sana lempar sini incididunt ut labore et dolore et kasire et indire magna akuilah. Ut enim ad minim caina cau, quis nonstop exercitation ullamco laboris sisi atas sisi bawah ex ea ada comodo tersesat. Duit ente kayak color in jemuran in atap in everywhere velit amat minta dolore lu fugiat nullar penyakit. Excepteur sint occaecat ada nona proident, sunt in curi que di office deket rumah pelit anim id est laborum autis.
Contoh dengan font Vampiro One, oleh Riccardo De Franceschi .
Langkah Pertama, anda disarankan untuk Membuat font ataupun memilih jenis Font di Google web fonts, Klik
Setelah anda selesai memilih, kliklah bagian Quick Use.
Pilih "Quick-use" untuk melihat kode |
Kemudian, anda akan disuguhi beberapa Option, Scroll Down page dan temukanlah deret kode Link.
Kode yang Diperlukan.. |
*Pada bagian "2. Choose the character sets you want", Centang yang perlu, perlu anda ketahui bahwa kemungkinan mencentang keduanya akan memperlambat proses loading pada blog, dan itu tergantung pada kecepatan koneksi ketika seseorang mengakses halaman blog tersebut.
*Nama font juga perlu anda ketahui, scroll down lagi dan anda akan menemukan nama font tersebut.
Lalu letakkan kode tersebut pada element <head>*Nama font juga perlu anda ketahui, scroll down lagi dan anda akan menemukan nama font tersebut.
Langkah Kedua, Integrasikan font pada CSS anda.
perubahan font akan terlihat apabila anda integrasikan pada deret CSS, contohnya seperti ini:
#wrapper{
font-family: ' Custom Font ', Arial, Calibri, consolas;
margin: 20px;
padding: 11px;
}
* Untuk tanda kutip, sebetulnya tidak ada pengaruhnya dalam hal ini, namun bisa dikatakan bahwa elemen dalam tanda kutip tersebut menjadi prioritas font-font lain.
* Kenapa saya menuliskan beberapa font dibelakang Custom font? Untuk jaga-jaga jika custom font tersebut tidak terdownload/terender oleh Browser.
Oh iya ada tambahan lagi nih :D
* Kenapa saya menuliskan beberapa font dibelakang Custom font? Untuk jaga-jaga jika custom font tersebut tidak terdownload/terender oleh Browser.
Google juga telah memberikan tips bahwa Menggunakan banyak fonts Custom ini akan memperlambat proses loading pada blog. Jadi, pikirkanlah sebelum menggunakan :)