Client/CSS

[CSS] ๊ตฌ๊ธ€ ์›น ํฐํŠธ(Google fonts) ์‚ฌ์šฉ ๋ฐฉ๋ฒ•

meeeeejin 2020. 6. 11. 20:49

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

 

<์‹คํ–‰ ๊ฒฐ๊ณผ>

 

 

 

 

 

๊ณต๋ถ€ํ•œ ๊ฒƒ์„ ์ •๋ฆฌํ•œ ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค. ์ˆ˜์ •ํ•  ๋ถ€๋ถ„์ด ์žˆ์œผ๋ฉด ์•Œ๋ ค์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค :)

 

 

 

728x90
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋™์ผ์กฐ๊ฑด

'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

'Client/CSS'์˜ ๋‹ค๋ฅธ๊ธ€

  • ํ˜„์žฌ๊ธ€[CSS] ๊ตฌ๊ธ€ ์›น ํฐํŠธ(Google fonts) ์‚ฌ์šฉ ๋ฐฉ๋ฒ•

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”