Goolge Fonts (๊ตฌ๊ธ ํฐํธ) ์ฌ์ฉ ๋ฐฉ๋ฒ
๊ตฌ๊ธ ํฐํธ๋ฅผ ์น ํ์ด์ง์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด๊ฒ ์ต๋๋ค.
1. ์ฌ์ดํธ ๋ค์ด๊ฐ๊ธฐ (https://fonts.google.com/)
2. ์ํ๋ ํฐํธ ์ ํํ๊ธฐ
๊ตฌ๊ธ ํฐํธ ์ฌ์ดํธ์ ๋ค์ด๊ฐ๋ค๋ฉด, ์ํ๋ ํฐํธ๋ฅผ ์ ํํ๋ฉด ๋ฉ๋๋ค.
๋ง์ ๋๋ ํฐํธ๋ฅผ ์ ํํด๋ ๋๊ณ ๊ฒ์์ ํตํด ์ํ๋ ํฐํธ๋ฅผ ์ฐพ์ ์๋ ์์ต๋๋ค.
์ ๋ ์์๋ก montserrat ํฐํธ๋ฅผ ๊ฒ์ํด์ ์ ํํ์ต๋๋ค.
3. ํฐํธ ์คํ์ผ ์ ํํ๊ณ ์ถ๊ฐํ๊ธฐ
ํฐํธ๋ฅผ ์ ํ๋ค๋ฉด, ๊ทธ ํฐํธ์ ๋ค์ํ ์คํ์ผ(๊ธ์จ ๊ตต๊ธฐ ๋๋ ๊ธฐ์ธ์์ฒด ๋ฑ) ์ค์์ ์ฌ์ฉํ ์คํ์ผ์ ์ ํํด์ผ ํฉ๋๋ค.
+ Select this style ์ ๋๋ฅด๋ฉด ํด๋น ํฐํธ ์คํ์ผ์ด ์ถ๊ฐ๋ฉ๋๋ค.
์ ํํ ํฐํธ ์คํ์ผ์ ์๋ ๊ทธ๋ฆผ์ ํ์๋ ๋ฒํผ์ ๋๋ฅด๋ฉด ํ์ธํ ์ ์์ต๋๋ค.
์ ๋ Regular 400, Medium 500, Bold 700 ์คํ์ผ์ ์ ํํ์ต๋๋ค.
4. Embedding ์ฝ๋ ๋ณต์ฌํ๊ธฐ
์ด์ ํด๋น ํฐํธ๋ฅผ HTML ํ์ผ์ embedding ํ๊ธฐ ์ํ ์ฝ๋๋ฅผ ๋ณต์ฌํด์ HTML ํ์ผ์ ์ฝ๋๋ฅผ ์ถ๊ฐํ๋ฉด ๋ฉ๋๋ค.
Embed ํญ์ ํด๋ฆญํด์ <link> ์ฝ๋๋ฅผ ๋ณต์ฌํ ๋ค HTML <head> ๋ถ๋ถ์ ์ถ๊ฐํด์ค๋๋ค.
๋งํฌ๋ ํฐํธ๋ฅผ CSS์์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ์๋ ๊ทธ๋ฆผ์ ํ๋์ ๋ฐ์ค์ ๋์์์ต๋๋ค.
5. ์ฌ์ฉ ์์
<HTML>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Google Fonts</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<p class="regular">Montserrat Regular 400</p>
<p class="medium">Montserrat Medium 500</p>
<p class="bold">Montserrat Bold 700</p>
</body>
</html>
|
cs |
<CSS>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
p {
font-family: "Montserrat", sans-serif;
}
.regular {
font-weight: 400;
}
.medium {
font-weight: 500;
}
.bold {
font-weight: 700;
}
|
cs |
<์คํ ๊ฒฐ๊ณผ>
๊ณต๋ถํ ๊ฒ์ ์ ๋ฆฌํ ๋ด์ฉ์ ๋๋ค. ์์ ํ ๋ถ๋ถ์ด ์์ผ๋ฉด ์๋ ค์ฃผ์๋ฉด ๊ฐ์ฌํ๊ฒ ์ต๋๋ค :)
'Client > CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [CSS] Media Query (๋ฏธ๋์ด์ฟผ๋ฆฌ) ํ๋ฉด ์ฌ์ด์ฆ Breakpoints (0) | 2020.06.12 |
|---|---|
| [CSS] z-index (์์์ ์์ ์์ ์ง์ ) (0) | 2020.06.12 |
| [CSS] Position ์์ฑ (static, relative, absolute, fixed) (0) | 2020.06.11 |
| [CSS] display ์์ฑ (0) | 2020.06.11 |
| [CSS] CSS ๊ธฐ๋ณธ ๋ฐ์ค ๋ชจ๋ธ(Box Model) (0) | 2020.06.09 |