Tutorial Belajar CSS Part 15 – Cara Menggunakan Google Font dengan CSS
Dalam tutorial ini kita masih membahas mengenai manipulasi font dengan CSS, yaitu cara menggunakan Google Font dengan CSS, Google menyediakan font yang bisa anda gunakan untuk tampilan text di web yang anda buat.
Video Tutorial – Menggunakan Google Font di CSS
Mengenal Google Font
Pada saat tutorial ini dibuat google menyediakan 818 font yang bisa anda gunakan, Google Font menyediakan 2 cara untuk penggunaan font yang mereka sediakan, anda bisa langsung bisa menggunakan link secara online, ataupun menggunakan mode external, yaitu dengan menggunakan perintah @font-face, kedua cara tersebut akan dibahas pada tutorial ini.
Cara untuk menggunakan Google Font ini adalah sebagai berikut :
silahkan anda mengakses alamat : https://www.google.com/fonts
Semisal dalam contoh ini anda memilih Chelsea Market, silahkan font yang diinginkan
Lalu pilih Style font yang diinginkan
Lalu klik dibagian tombol disebelah kanan atas
Maka akan menampilkan informasi dari style font itu, akan terdapat 2 tab yaitu : Review dan Embed
dibagian review ada tombol download Font
dibagian embed ada code untuk menggunakan font, menggunakan link ataupun import, untuk melihat code bagian link, bisa klik tab link
untuk melihat code bagian @import, bisa klik tab @import
Sehingga dari contoh diatas kita mendapatkan code untuk menggunakan google font dengan perintah link, dengan code dibawah ini :
|
1 |
<link href="https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap" rel="stylesheet"> |
Untuk menggunakan google font dengan perintah @import, dengan code dibawah ini :
|
1 2 3 |
<style> @import url('https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap'); </style> |
dan untuk perintah CSS untuk penggunaan font family seperti dibawah ini :
|
1 |
font-family: 'Chelsea Market', cursive; |
Cara menggunakan Google Font dengan CSS
Anda dapat menggunakan beberapa cara untuk menggunakan Google Font dengan menggunakan CSS, Adapun beberapa caranya sebagai berikut :
Menggunakan tag <link>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title>Belajar Google Font</title> <link href="https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap" rel="stylesheet"> <style type="text/css"> p{ font-family: 'Chelsea Market', cursive; } </style> </head> <body> <p>ini adalah paragraf pertama</p> </body> </html> |
anda cukup menambahkan skrip menggunakan tag <link>
|
1 |
<link href="https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap" rel="stylesheet"> |
sesuai yang kita dapatkan di google font.
lalu gunakan font-family, seperti yang dituliskan di google font.
|
1 |
<span style="font-family: tahoma, arial, helvetica, sans-serif;">font-family: 'Chelsea Market', cursive;</span> |
Menggunakan perintah @import
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title>Belajar Google Font</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap'); p{ font-family: 'Chelsea Market', cursive; } </style> </head> <body> <p>ini adalah paragraf pertama</p> </body> </html> |
skripnya hampir sama dengan menggunakan tag <link>, hanya kita menggunakan perintah @import seperti yang tertulis di google font
|
1 2 3 |
<style> @import url('https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap'); </style> |
Menggunakan font external dengan perintah @font-face
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <title>Belajar Google Font</title> <style type="text/css"> @font-face { font-family: chelsea-market; src: url('ChelseaMarket-Regular.ttf'); } p { font-family: chelsea-market; } </style> </head> <body> <p>ini adalah paragraf pertama</p> </body> </html> |
anda cukup menggunakan perintah @font-face untuk mendeklarasikan file font yang akan digunakan, untuk detail tutorial font external dibahas di tutorial cara menggunakan font external dengan css
Dari beberapa cara tersebut, silahkan pilih cara yang menurut anda sesuai, sebagai catatan untuk cara pertama menggunakan tag <link> dan cara kedua menggunakan perintah @import anda harus terkoneksi dengan internet, tetapi untuk cara ketiga yang menggunakan mode external anda tidak perlu menggunakan koneksi internet.
hasil dari penggunaan skrip diatas adalah seperti berikut ini :
jadi kurang lebih seperti itu bagaimana cara menggunakan google font untuk merubah jenis font pada halaman html menggunakan CSS, jika ada yang ingin didiskusikan silahkan di kolom komentar, sampai jumpa di tutorial warung belajar selanjutnya yang masih membahas mengenai CSS
Artikel ini membantu.