Skip to content

docs: menambahkan materi css google fonts#260

Merged
mergify[bot] merged 4 commits intobellshade:mainfrom
pamela-sarnia:css-google-fonts
Oct 7, 2022
Merged

docs: menambahkan materi css google fonts#260
mergify[bot] merged 4 commits intobellshade:mainfrom
pamela-sarnia:css-google-fonts

Conversation

@pamela-sarnia
Copy link
Collaborator

@pamela-sarnia pamela-sarnia commented Oct 4, 2022

Deskripsi (Description)

Checklist:

Umum:
  • Saya menambah kode basic terbaru.
  • Saya memperbaiki kode basic yang sudah ada.
  • Saya menambah template terbaru.
  • Saya memperbaiki template yang sudah ada.
  • Saya memperbaiki dokumentasi.
  • Saya menambah dokumentasi.
Contributor Requirements (Syarat Kontributor) dan Lain-Lain:
  • Saya sudah membaca (I have read) CONTRIBUTING dan sudah menyetujui semua syarat.
  • Saya telah menambahkan komentar kode yang memberikan penjelasan maksud dari kode yang saya buat.
  • Saya menggunakan bahasa Indonesia untuk memberikan penjelasan dari kode yang saya buat.

Environment

Saya menggunakan (I'm using):

  • os = windows

Testing

  • link html
  • lint css

linked issue #NOMOR_ISSUE

@pamela-sarnia pamela-sarnia requested a review from dhafitf as a code owner October 4, 2022 14:33
@auto-add-label auto-add-label bot added the documentation Improvements or additions to documentation label Oct 4, 2022
dhafitf
dhafitf requested changes Oct 4, 2022
View reviewed changes
CSS/020 CSS Google Fonts/README.MD Outdated
Comment on lines 9 to 50
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 <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>
```

Cara kedua, menggunakan link style sheet khusus di mana kamu cukup mengganti nama font di akhir link. Tempatkan link tersebut pada <head> dan panggil nama font pada CSS.

``` HTML
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">

<style>
body {
font-family: "Silkscreen", cursive;
}
</style>
</head>
```

Hasil:
![Contoh Penggunakan Google Fonts](https://i.ibb.co/fMrksbG/Screenshot-2022-10-03-230101.png)
Copy link
Member

@dhafitf dhafitf Oct 4, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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 <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>
```
Cara kedua, menggunakan link style sheet khusus di mana kamu cukup mengganti nama font di akhir link. Tempatkan link tersebut pada <head> dan panggil nama font pada CSS.
``` HTML
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Silkscreen", cursive;
}
</style>
</head>
```
Hasil:
![Contoh Penggunakan Google Fonts](https://i.ibb.co/fMrksbG/Screenshot-2022-10-03-230101.png)
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

Kode tersebut tidak menunjukkan bahwa "Ada dua cara untuk menggunakan Google Fonts". Kode tersebut hanya menunjukkan cara cepat mengubah font family dari google jika pembuat kode sudah paham/tahu tautan dari google font. Namun secara keseluruhan, cara yang dilakukan tetaplah sama.

dhafitf
dhafitf requested changes Oct 5, 2022
View reviewed changes
Copy link
Member

@dhafitf dhafitf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sama satu lagi, kemarin ketinggalan yang ini. Mohon diperbaiki

CSS/020 CSS Google Fonts/README.MD Outdated

## 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 ( | ).
Copy link
Member

@dhafitf dhafitf Oct 5, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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 ( | ).
Jika kamu ingin menggunakan beberapa Google Fonts, cukup paste semua link dari Google Fonts pada tag `<head>`. Atau gunakan satu link style sheet dan sebutkan semua nama font dengan dipisahkan oleh tanda ( | ).

@pamela-sarnia
Copy link
Collaborator Author

pamela-sarnia commented Oct 6, 2022

Sama satu lagi, kemarin ketinggalan yang ini. Mohon diperbaiki

sudah diperbaiki ya

dhafitf
dhafitf approved these changes Oct 7, 2022
View reviewed changes
Copy link
Member

@dhafitf dhafitf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@mergify
Copy link

mergify bot commented Oct 7, 2022

terima kasih atas kontribusinya @pamela-sarnia !

@mergify mergify bot merged commit ce2fe3f into bellshade:main Oct 7, 2022
@dhafitf dhafitf mentioned this pull request Oct 17, 2022
Open
14 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@dhafitf dhafitf dhafitf approved these changes

Assignees

No one assigned

Labels

documentation Improvements or additions to documentation HACKTOBERFEST-ACCEPTED ready-to-merge siap merge sudah direview !

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@pamela-sarnia @dhafitf