Font Web Ringan pagespeed makin kencang

Web Safe Font - recommended

Postingan terkait:

1. Cara pasang Link font
Daftar isi:
2. Web Safe Font
Jenis font
• Arial
• Verdana
• Helvetica
• Tahoma
• Trebuchet
• Times
• Georgia
• Garamond
• Courier
• Brush
3. Fallback font

Web Safe Font

Kenapa dikatakan Web safe font ?

Saya pribadi mengartikan sebagai Font Web Ringan seperti judul diatas.
Menurut beberapa sumber, Web Safe Font ini adalah jenis Font yang kompatibel dibanyak perangkat dan browser.

^{Font gagal muat / tidak kompatibel :}
☐☐☐☐ <------> ⛝⛝⛝⛝

Kompatibel dalam arti mudah terbaca dan pemasangannya tidak memerlukan link yang juga harus dipasang dalam template hanya untuk mendukung style karakter font itu sendiri.
Yang biasanya link tersebut justru menyebabkan hambatan pada saat halaman dirender.

Berikut ini beberapa jenis web safe font yang direkomendasikan.

Penulisan dalam CSS :

<style>

.selector {font-family:'Arial',sans-serif;}
.selector {font-family:'Verdana',sans-serif;}
.selector {font-family:'Helvetica',sans-serif;}
.selector {font-family:'Tahoma',sans-serif;}
.selector {font-family:'Trebuchet MS',sans-serif;}
.selector {font-family:'Times New Roman',serif;}
.selector {font-family:'Georgia',serif;}
.selector {font-family:'Garamond',serif;}
.selector {font-family:'Courier New',monospace;}
.selector {font-family:'Brush Script',cursive}

</style>

Penjelasan penulisan CSS :

.selector {font-family:'Font Target',fallback-font;}

• selector : tag HTML / element yang ditarget
• font-family : atribut element
• Font Target : Nama font target
• fallback-font : nama font cadangan

Pengertian Fallback font

• Fallback font berperan sebagai cadangan apabila dalam kondisi tertentu font target bermasalah maka yang akan ditampilkan adalah fallback font ini
• Masalah yang sering ditemui pada font target umumnya bisa disebabkan karena pemasangan jenis pada font tertentu yang mungkin kurang tepat, atau font tidak ditemukan sehingga berubah bentuk tidak dapat ditampilkan.
  Disitulah fallback font berperan menggantikan font target.
• Jenis font yang sering berfungsi sebagai fallback adalah :
  
  1. Serif :
     ("Times New Roman", Times, serif),
     (Georgia, serif),
     (Garamond, serif)
  2. Sans-serif :
     (Arial, Helvetica, sans-serif),
     (Tahoma, Verdana, sans-serif),
     ("Trebuchet MS", Helvetica, sans-serif),
     (Geneva, Verdana, sans-serif)
  3. Monospace : ("Courier New", Courier, monospace)
  4. Cursive : ("Brush Script MT", cursive)
  5. Fantasy : (Copperplate, Papyrus, fantasy)

Arial (sans-serif)

ABCDEFGHIJ KLMNOPQRS

abcdefghij klmnopqrs

abcdefghij klmnopqrs

abcdefghij klmnopqrs

12345 67890

Verdana (sans-serif)

ABCDEFGHIJ KLMNOPQRS

abcdefghij klmnopqrs

abcdefghij klmnopqrs

abcdefghij klmnopqrs

12345 67890

Helvetica (sans-serif)

ABCDEFGHIJ KLMNOPQRS

abcdefghij klmnopqrs

abcdefghij klmnopqrs

abcdefghij klmnopqrs

12345 67890

Tahoma (sans-serif)

ABCDEFGHIJ KLMNOPQRS

abcdefghij klmnopqrs

abcdefghij klmnopqrs

abcdefghij klmnopqrs

12345 67890

Trebuchet MS (sans-serif)

ABCDEFGHIJ KLMNOPQRS

abcdefghij klmnopqrs

abcdefghij klmnopqrs

abcdefghij klmnopqrs

12345 67890

Times New Roman (serif)

ABCDEFGHIJ KLMNOPQRS

abcdefghij klmnopqrs

abcdefghij klmnopqrs

abcdefghij klmnopqrs

12345 67890

Georgia (serif)

ABCDEFGHIJ KLMNOPQRS

abcdefghij klmnopqrs

abcdefghij klmnopqrs

abcdefghij klmnopqrs

12345 67890

Garamond (serif)

ABCDEFGHIJ KLMNOPQRS

abcdefghij klmnopqrs

abcdefghij klmnopqrs

abcdefghij klmnopqrs

12345 67890

Courier New (monospace)

ABCDEFGHIJ KLMNOPQRS

abcdefghij klmnopqrs

abcdefghij klmnopqrs

abcdefghij klmnopqrs

12345 67890

Brush Script MT (cursive)

ABCDEFGHIJ KLMNOPQRS

abcdefghij klmnopqrs

abcdefghij klmnopqrs

abcdefghij klmnopqrs

12345 67890