diff --git a/CSS/020 CSS Google Fonts/README.MD b/CSS/020 CSS Google Fonts/README.MD new file mode 100644 index 0000000..4c7f6bb --- /dev/null +++ b/CSS/020 CSS Google Fonts/README.MD @@ -0,0 +1,49 @@ +# CSS Google Font + +Kalau kamu tidak mau menggunakan font standar yang ada di HTML, kamu bisa menggunakan Google Fonts. + +Google Fonts gratis dan bebas untuk digunakan untuk apa saja. Selain itu, koleksi Google Fonts juga banyak, ada lebih dari 1.000 font yang bisa kamu pilih. + +## Cara Menggunakan Google Fonts + +1. Copy link style sheet dari Google Fonts dan paste link tersebut di bagian `` pada file HTML. + +![Link Style Sheet Google Fonts](https://i.ibb.co/CHt7DKk/Screenshot-2022-10-03-224721.png) + +2. Cantumkan nama font tersebut pada CSS. + +### Contoh + +Misalnya, kita ingin menggunakan font "Silkscreen" dari Google Fonts: + +```HTML + + + + + + +``` + +Hasil: +![Contoh Penggunakan Google Fonts](https://i.ibb.co/fMrksbG/Screenshot-2022-10-03-230101.png) + +## Menggunakan Beberapa Google Fonts + +Jika kamu ingin menggunakan beberapa Google Fonts, cukup paste semua link dari Google Fonts di ``. Atau, gunakan link style sheet dan sebutkan semua nama font dengan dipisahkan oleh tanda ( | ). + +Contoh: +```HTML + +``` + +Hasil: +![Penggunaan Beberapa Google Fonts](https://i.ibb.co/QmmtTgw/Screenshot-2022-10-03-232919.png) + +Catatan: Menggunakan beberapa font sekaligus bisa memperlambat web kamu. Perhatikan hal ini. + +Referensi: [w3schools](https://www.w3schools.com/css/css_font_google.asp)