EnglishFrench German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

30 Nov 2012

Custom web fonts untuk blogger

Font adalah bentuk suatu karakter/huruf. Dengan font sesuatu dapat disampaikan dengan gaya tertentu. Bentuk-bentuk font sangat mempengaruhi nilai dan kondisi dari suatu baris tulisan. Gaya tulisan menentukan persepsi akhir dari suatu tulisan, sehingga harus ditempatkan sesuai dengan porsinya masing-masing. Font untuk surat legal tentusaja berbeda dengan font untuk surat ucapan ulang tahun kepada teman. Karena dalam form legal terdapat aturan baku mengenai etika penyampaian sesuatu melalui tulisan.
Dalam dunia design, posisi font sangat menentukan. Dengan munculnya ribuan bahkan jutaan jenis font menjadi referensi yang memudahkan untuk mengatur gaya design tertentu. Termasuk juga dalam hal web design, tentu memerlukan referensi font untuk kebutuhan style designnya. Google menangkap hal ini dengan meluncurkan referensi font yang dinamai Google Webfonts Tentu saja ini hal yang menggembirakan bagi para blogger, dengan Google Webfonts ini menjadikan blogger bebas menuangkan imajinasi kreasinya kedalam website/blognya melalui tulisan bergaya. Webfonts ini mempunyai tool atau perkakas yang baik dan lengkap. Web designer maupun blogger pemula dapat menggunakan referensi font-font ini dengan mudah.
Untuk memasang google webfonts pada blogger caranya :
  1. dengan menambahkan kode di bawah ini di atas </head> tag, sebagai contoh ingin menggunakan font dengan nama Quintessential maka kodenya adalah.
    <link href='http://fonts.googleapis.com/css?family=Quintessential' rel='stylesheet' type='text/css'>
    Jika ingin menggunakan yang lainnya tinggal mengganti nama font-nya (Quintessential).
  2. Untuk kode style.css nya bisa menggunakan contoh seperti ini :
    font-family: 'Quintessential', cursive;
    atau bisa seperti ini :
    h1 { font-family: 'Quintessential', cursive; font-weight: 400; }
  3. jika ingin membuat font menjadi bold, ganti script no. 1 di atas dengan kode ini :
    <link href='http://fonts.googleapis.com/css?family=Quintessential:400,700' rel='stylesheet' type='text/css'>
  4. Dan mengganti style.css pada
    font-weight: 400;
    menjadi
    font-weight: 700;
  5. Untuk menambah design agar lebih menarik bisa ditambah dengan shadow pada font tersebut dengan kode di bawah ini :
    text-shadow: 3px 3px 3px #ccc;



rating : 4.5 by : nekadbisnis

0 komentar:

Posting Komentar