docs: menambahkan materi css google fonts #260
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
auto-add-label
bot
added
the
documentation
dhafitf
requested changes
Oct 4, 2022
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. | ||
|
|
||
|  | ||
|
|
||
| 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: | ||
|  |
Member
There was a problem hiding this comment.
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. | |
|  | |
| 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: | |
|  | |
| 1. Copy link style sheet dari Google Fonts dan paste link tersebut di bagian <head> pada file HTML. | |
|  | |
| 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:
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
requested changes
Oct 5, 2022
Member
dhafitf
left a comment
dhafitf
left a comment
There was a problem hiding this comment.
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 ( | ). |
Member
There was a problem hiding this comment.
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 ( | ). |
Collaborator
Author
sudah diperbaiki ya |
|
terima kasih atas kontribusinya @pamela-sarnia ! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Deskripsi (Description)
Checklist:
Umum:
Contributor Requirements (Syarat Kontributor) dan Lain-Lain:
Environment
Saya menggunakan (I'm using):
os=windowsTesting
linked issue #NOMOR_ISSUE