Skip to content

docs: menambahkan materi css google fonts #260

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mergify merged 4 commits into from
Oct 7, 2022
Merged

docs: menambahkan materi css google fonts #260

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a229fda
docs: menambahkan materi css google fonts
pamela-sarnia Oct 4, 2022
4171eed
fix: memperbaiki dengan suggestion
pamela-sarnia Oct 5, 2022
f1d7d61
Merge branch 'bellshade:main' into css-google-fonts
pamela-sarnia Oct 5, 2022
6ece85c
Update README.MD
pamela-sarnia Oct 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions CSS/020 CSS Google Fonts/README.MD
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 `<head>` 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
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Silkscreen&display=swap" rel="stylesheet">
<style>
body {
font-family: "Silkscreen", cursive;
}
</style>
</head>
```

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 `<head>`. Atau, gunakan link style sheet dan sebutkan semua nama font dengan dipisahkan oleh tanda ( | ).

Contoh:
```HTML
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Silkscreen|Pacifico|Indie Flower">
```

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)