Cara mengimfor dan mengintegrasikan Google fonts di CSS

Pratama SEO : Cara mengimfor dan mengintegrasikan Google fonts di CSS

Halo semuanya kali ini kita akan mengimfor dan mengintegrasikan Google Fonts pada file CSS mungkin rata - rata developer mengintegrasikan fon dengan cara melalui Link dan disimpan di tag head namun, bagaimana caranya jika kita mengintegrasikannya langsung pada file CSS, oke langsung saja pada prose prakteknya.

1. masuk ke browser lalu ketikan fonts.google.com atau klik disini. Dan kalian akan masuk ke sebuah website seperti pada gambar.

2. langsung saja kalian cari font untuk website kalian atau dapat langsung mencari nama fontnya langsung paa input pencarian. Nah disini saya mencoba mencari font dengan nama Poppins.

3. setelah kalian temukan font yang sesuai keinginan langsung saja kalian klik, sehingga akan langsung diarahkan ke halaman seperti pada gambar.

4. Setelah itu cari style yang kalian ingin gunakan dengan mengklik + select this style.

5. lalu pilih icon di pojok kanak atas maka akan muncul 2 pilihan untegrasi font ada dengan menggunakan link atau embed CSS(@import), pilih yang embed CSS, lanngsung select dan copy mulai dari @url seperti pada gambar ya, lalu pastekan pada file style.css yang pastinya sudah tersambung ya ke file index.html.

langsung saja kalian copy juga font-familynya dan pastekan di mana kalian ingin menggunakan font tersebut contoh :

h1 {

    font-family: 'Poppins', san-serif;

}

dan sekarang kita sudah berhasil mengintegrasikan CSS dengan google font.

Happy Coding, bye