Cara Desain Font pada website

Setelah kita memahami rekomendasi atau kombinasi font pada Artikel kita dan Mengenal jenis Font bagi yang belum tau silahkan baca : Rekome...

Setelah kita memahami rekomendasi atau kombinasi font pada Artikel kita dan Mengenal jenis Font bagi yang belum tau silahkan baca : Rekomendasi dan Kombinasi Font
cara mengubah font pada blog

Nah sekarang kita akan Membuat font untuk blog atau website kita dengan cara menggunakan Google Fonts, Yap Google sudah menjadi trend dikalangan desain website, Jika agan berniat untuk membuatnya atau memakai nya, maka pilihlah Font yang akan anda gunakan, tentu setelah agan membaca rekomendasi font yang baik agan bisa memilah mana yang paling agan minati, Nah pertama kita masuk ke situs Google : www.google.com/fonts
Disana kita dapat memfilter jenis jenis font, mencoba bentuk teks ukuran dan sebagainya.
cara memasang font pada website

Setelah menemukan font yang agan sukai, misalnya font Open Sans, Maka kita klik tanda tambah + dan atur style font yang agan suka misalnya Normal 400 dan Bold 700 dan dapatkan URL dan salin rujukan pada file font di elemen head sebagai berikut :
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700'rel='stylesheet'type='text/css'> 
<link href="tema.css" rel="stylesheet">

Selanjutnya kita mengganti bagian font-family di selector body agan, sehingga menjadi seperti :
body {
   ...
   font-family: 'opensans', sans-serif;
   ...
}

Lalu coba melihat template agan, di browser untuk melihat efek penulisan perubahan Font pada teks yang agan terapkan, jika misalnya agan tidak suka, agan bisa merubahnya lagi dan mengulangi langkah langkah kita tadi.

Untuk kita menggunakan beberapa Font sekaligus, maka pisahkan penyebutan nama font di tag <link> menggunakan tanda | sebagai contoh :
 <link href='https://Fonts.googleapis.com/css?family=Open+Sans:400,700'|Roboto:400,700'  rel='stylesheet'type='text/css'>
Selanjutnya kita deklarasikan font-family secara terpisah misalnya kita gunakan Open sans sebagi font global seperti Rekomendasi font di artikel kita sebelum nya, dan gunakanlah font-family kedua untuk heading agan, Misalnya membuat aturan seperti berikut di CSS dengan aturan line-height opsional :
h1,h2,h3 {
font-family: 'roboto', sanserif;
line-height: 1.2em;
}

Catatan : Sebagai Tips jangan terlalu banyak menggunakan Google Fonts di halaman situs kita, Usahakan 2 atau tiga Fonts saja demikian juga jang pilih semua style yang ada, Cukup style yang lazim dipakai yaitu style normal dan bold saja. Dikarenakan semakin banyak jenis font dan style yang kita pakai Maka halaman website kita akan menjadi lambat di akses nya dan di dalam skor Pagespeed Insight akan berkurang skor nya.

Postingan Terkait

0 komentar