From a229fdaa718c28d9fb8a3458a7deb61a55b1fe95 Mon Sep 17 00:00:00 2001 From: Pamela Sarnia Date: Tue, 4 Oct 2022 21:32:06 +0700 Subject: [PATCH 1/3] docs: menambahkan materi css google fonts --- CSS/020 CSS Google Fonts/README.MD | 64 ++++++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 CSS/020 CSS Google Fonts/README.MD diff --git a/CSS/020 CSS Google Fonts/README.MD b/CSS/020 CSS Google Fonts/README.MD new file mode 100644 index 0000000..78cb9f7 --- /dev/null +++ b/CSS/020 CSS Google Fonts/README.MD @@ -0,0 +1,64 @@ +# 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 + +Ada dua cara untuk menggunakan Google Fonts: + +Pertama, menggunakan link yang sudah disediakan 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 + + + + + + +``` + +Cara kedua, menggunakan link style sheet khusus di mana kamu cukup mengganti nama font di akhir link. Tempatkan link tersebut pada dan panggil nama font pada CSS. + +``` 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. \ No newline at end of file From 4171eedc5b7a62300637c8d7f8a218b2db242459 Mon Sep 17 00:00:00 2001 From: Pamela Sarnia Date: Wed, 5 Oct 2022 09:52:10 +0700 Subject: [PATCH 2/3] fix: memperbaiki dengan suggestion --- CSS/020 CSS Google Fonts/README.MD | 23 ++++------------------- 1 file changed, 4 insertions(+), 19 deletions(-) diff --git a/CSS/020 CSS Google Fonts/README.MD b/CSS/020 CSS Google Fonts/README.MD index 78cb9f7..085dcee 100644 --- a/CSS/020 CSS Google Fonts/README.MD +++ b/CSS/020 CSS Google Fonts/README.MD @@ -6,10 +6,7 @@ Google Fonts gratis dan bebas untuk digunakan untuk apa saja. Selain itu, koleks ## Cara Menggunakan Google Fonts -Ada dua cara untuk menggunakan Google Fonts: - -Pertama, menggunakan link yang sudah disediakan Google Fonts: -1. Copy link style sheet dari Google Fonts dan paste link tersebut di bagian pada file HTML. +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) @@ -32,20 +29,6 @@ Misalnya, kita ingin menggunakan font "Silkscreen" dari Google Fonts: ``` -Cara kedua, menggunakan link style sheet khusus di mana kamu cukup mengganti nama font di akhir link. Tempatkan link tersebut pada dan panggil nama font pada CSS. - -``` HTML - - - - - -``` - Hasil: ![Contoh Penggunakan Google Fonts](https://i.ibb.co/fMrksbG/Screenshot-2022-10-03-230101.png) @@ -61,4 +44,6 @@ Contoh: 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. \ No newline at end of file +Catatan: Menggunakan beberapa font sekaligus bisa memperlambat web kamu. Perhatikan hal ini. + +Referensi: [w3schools](https://www.w3schools.com/css/css_font_google.asp) From 6ece85c9a86621dff5ec72cbb1ccd89f28b63412 Mon Sep 17 00:00:00 2001 From: Pamela Sarnia Date: Thu, 6 Oct 2022 04:21:49 +0700 Subject: [PATCH 3/3] Update README.MD --- CSS/020 CSS Google Fonts/README.MD | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CSS/020 CSS Google Fonts/README.MD b/CSS/020 CSS Google Fonts/README.MD index 085dcee..4c7f6bb 100644 --- a/CSS/020 CSS Google Fonts/README.MD +++ b/CSS/020 CSS Google Fonts/README.MD @@ -34,7 +34,7 @@ Hasil: ## 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 ( | ). +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