Home » HTML » Tutorial Menggunakan Google Font Untuk Desain Website

Tutorial Menggunakan Google Font Untuk Desain Website

Ditulis oleh Segi Henggana · 21 March 2019
Tutorial Menggunakan Google Font Untuk Desain Website

Pernah merasa template bawaan website kurang menarik? Apalagi rata-rata font bawaan itu adalah Arial, Times New Roman dan Calibri. Yang menggunakan template tersebut bukan hanya satu atau dua orang, ada ratusan ribu orang yang juga menggunakan template website yang sama di Indonesia, belum lagi dengan mereka yang memiliki website atau blog sendiri di luar negeri.

Pastinya akan membuat kita merasa bahwa website kita kurang original, terasa sama saja dengan website kebanyakan. Bagi mereka yang sudah piawai mendesain website, terbiasa dengan coding dan segala tektek bengeknya, tentu sangat mudah untuk mengotak-atik tampilan website supaya terlihat lebih keren dan berbeda dengan yang lain, tetapi bagaimana dengan kita yang masih pemula?

Jangankan untuk coding, untuk menemukan dimana letak <title> atau </head> saja sudah cukup membuat bingung. Maka karena itu, bagi yang ingin mencoba untuk mengotak-atik font bawaan di website dengan cara yang mudah, serta tidak gagal, bisa menggunakan Google Font.

Apa Itu Google Fonts?

Seperti yang kita ketahui, Google memiliki platform website sendiri, yaitu Blogger.com dan di sana kita bisa membuat website gratis sendiri dengan mudah dan cepat. Menariknya lagi, Google sudah menyiapkan berbagai tools lain yang bisa digunakan untuk memaksimalkan blog kita. Dimulai dari Google Analythic untuk analisis lengkap blog, Google Adwords, Webmaster Tools, dan lain sebagainya.

Bahkan untuk mengganti font di website pun kita bisa menggunakan tool yang disediakan oleh Google, yaitu Google Font. Adapun Google Font adalah sebuah perpustakaan digital dimana di dalamnya terdapat lebih dari 900 font gratis dan berlisensi. Kita bisa menggunakannya untuk berbagai keperluan tanpa perlu takut terkena hak cipta atau royalti.

Jadi, untuk membuat desain poster digital, mengganti font di website dan lainnya bisa menggunakan berbagai pilihan font yang ada disini. Tak perlu membayar alias gratis.

Tutorial Menggunakan Google Font

Dengan mengganti font website, kita bisa mendapatkan beberapa manfaat. Salah satunya membuat website menjadi lebih eksklusif, berbeda dengan yang lain, menunjukkan jati diri karena bisa disesuaikan dengan keinginan dan membuat tampilan website atau blog jadi lebih cantik.

Untuk mulai mencoba mengganti font di website, maka ikuti step-step yang akan dipaparkan berikut ini.

  1. Bukalah Google Fonts dengan mengklik tautan: http://www.google.com/fonts.
  2. Setelah halaman Google Fonts terbuka maka akan muncul banyak sekali piilihan fonts yang bisa digunakan. Contohnya saja kita akan menggunakan font yang memiliki nama Open Sans. Cobalah untuk menekan tombol Quick-Use dengan bentuk anak panah ke kanan.
  3. Setelah ditekan/diklik, maka kita akan diarahkan ke halaman Quick Use dan scroll ke bawah sampai kita temukan kode CSS dan kode HTML.
  4. Lihatlah kode HTML apa yang ada di dalamnya, kemudian copy terlebih dahulu kodenya setelah itu di-paste pada bagian bawah dari kode <head> atau kita juga bisa meletakkannya di bawah <title>. Terserah keinginan masing-masing.
  5. Yang berikutnya dilakukan adalah tinggal mengcopy kode CSS itu ke dalam kode CSS milik kita dan lihat hasilnya. Untuk yang masih kebingungan, berikut adalah contoh struktur kodenya yang bisa disamakan:
<!DOCTYPE html>
<html>
<head>
    <title>Tutorial Google Fonts</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
    <style type="text/css">
        #halo{
            font-size: 25px;
            font-family: "Open Sans", sans-serif;
        }
    </style>
</head>
<body>
    <div id="halo">
        Google Fonts
    </div>
</body>
</html>

Bagaimana? Tidak terlalu sulit untuk mengubah font di website kita, bukan? Tak perlu menjadi programmer handal lebih dulu jika hanya ingin mengubah font saja.

Memang programming dan coding bukan hal yang mudah, tetapi jika sekali saja sudah bisa melakukan dari yang paling sederhana sekalipun, tentunya akan muncul rasa penasaran dan ingin menambah skill menjadi lebih hebat lagi. Siapa yang tahu, berawal dari berhasil mengubah font di website, bisa berakhir menjadi programmer yang mumpuni. Semangat!

Saya masih ingat waktu pertama kali bikin layout website pas SMA, pake TABLE :facepalm:. Sekarang bekerja di Bukalapak sebagai Front End Engineer. Tidak sedang mencari pekerjaan baru.

Lainnya