Kamis, 30 Maret 2017

Tutorial Menggunakan Font Google Pada Layout Web Desain

Assalamualaikum Wr.Wb




  • Pengertian
Google Font merupakan sebuah jenis / gaya font yang telah di sediakan oleh google yang bisa di jadikan salah satu alternatif gaya font pada web yang akan kita buat.

  • Latar Belakang
 Sebuah tampilan website yang bagus memang sangat penting dalam media informasi sekarang,komposisi website yang baik tidak terlepas dari gaya font yang di gunakan untuk menunjang penampilan website.Untuk itu adanya tutorial ini di harapkan bisa membantu teman semua yang ingin membuat font pada layout websitenya terlihat lebih berfariasi dengan font yang tidak monoton.

  • Jangka Waktu 
10 - 15 menit.

  • Tahap Penyelesaian
  • kita hubungkan dulu font google dengan layout yang akan kita buat,tuliskan script atau syntax seperti di bawah ini(saya menggunakan jenis font macondo dan lato)

<link href="https://fonts.googleapis.com/css?family=Macondo" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

  • Kita buat style cssnya agar lebih mudah untuk mengatur penerapan font

<style type="text/css">
    h1{font-family: 'Macondo', sans-serif;}
    p{font-family: 'Lato', sans-serif;}
</style>

  • Setelah itu kita terapkan font nya,Untuk h1(biasanya untuk judul) saya gunakan Macondo dan p(paragraf) saya menggunakan font Lato.
 <body>
<h1>Judul ini menggunakan Font Macondo</h1>
<p>Paragraf ini menggunakan font Lato.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>

  • Untuk yang belum jelas bisa melihat screenshot di bawah
 

  • Hasil
 
  • Kesimpulan
Membuat variasi font pada layot web ternyata tidak begitu sulit dan prosesnya juga tidak lama,dan yang terpenting bisa membuat tampilan layout website kita lebih bervariasi.
 
 
Ya mungkin sekian dulu postingan kali ini semoga bermanfaat,terimakasih sudah berkunjung sampai jumpa di postingan berikutnya
 
Wassalamualaikum Wr.Wb 
Share:

0 komentar:

Posting Komentar