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.





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 










https://googleads.g.doubleclick.net/pagead/ads?guci=2.2.0.0.2.2.0.0&client=ca-pub-5950616551129814&output=html&h=141&slotname=9836807168&adk=3783677664&adf=350610529&pi=t.ma~as.9836807168&w=562&fwrn=4&lmt=1611855151&rafmt=11&psa=1&format=562x141&url=https%3A%2F%2Fwww.warungbelajar.com%2Ftutorial-belajar-css-cara-menggunakan-google-font-dengan-css.html&flash=0&wgl=1&adsid=ChEIgN7JgAYQu_jh6Mr58tPoARJMALURu69WDi64unuJ6pBEedvsp76j6PVnWcW7M-dWgyiaIK_NbRbcVzjKQp6qHuzxBBlZhZakH5HxIUNuha9nhoo9xXr_VOcV7Whqeg&dt=1611855125812&bpp=6&bdt=307&idt=1185&shv=r20210125&cbv=r20190131&ptt=9&saldr=aa&abxe=1&cookie=ID%3D3a347e2e5f0d6f75-222f0dafcac5004f%3AT%3D1611282185%3ART%3D1611282185%3AS%3DALNI_Ma-PNYp7czgCQTC3dXBG7SwEmrsiQ&prev_fmts=562x141%2C0x0&nras=1&correlator=3685705688726&frm=20&pv=1&ga_vid=973230638.1611282182&ga_sid=1611855127&ga_hid=987415682&ga_fc=0&rplot=4&u_tz=420&u_his=1&u_java=0&u_h=768&u_w=1366&u_ah=720&u_aw=1366&u_cd=24&u_nplug=2&u_nmime=2&adx=42&ady=2869&biw=897&bih=634&scr_x=0&scr_y=342&eid=21066649%2C21068084%2C21068769%2C21068945%2C21069109%2C21069808%2C21066973&oid=3&psts=AGkb-H8zjxSSBbWyzUhc5Hq8rRXSlBT5sXdnOON6dOgMgvb0zwK4waetPLs4KMeYrkQ2yAZKTlhGchOD8NSC&pvsid=243189236171894&pem=103&ref=https%3A%2F%2Fwww.warungbelajar.com%2Ftutorial-belajar-css-menggunakan-font-external-dengan-css.html&rx=0&eae=0&fc=896&brdim=4%2C24%2C4%2C24%2C1366%2C24%2C922%2C720%2C912%2C634&vis=1&rsz=%7C%7CeEbr%7C&abl=CS&pfx=0&cms=2&fu=8320&bc=29&jar=2021-01-28-14&ifi=2&uci=a!2&btvi=1&xpc=DryIhOPXgj&p=https%3A//www.warungbelajar.com&dtd=26031




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 :





<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 :





1font-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>





<!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





<!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





<style>
@import url('https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap');
</style>




Menggunakan font external dengan perintah @font-face





<!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 belajarselanjutnya yang masih membahas mengenai CSS


Lebih baru Lebih lama