๐Ÿ› ๏ธ์œ ํ‹ธ๋ฆฌํ‹ฐ ํ—ˆ๋ธŒ
๐Ÿ’ฌํ”ผ๋“œ๋ฐฑ
๐Ÿ  ํ™ˆ์œผ๋กœ

๐Ÿ”ค ๋‹ค๊ตญ์–ด ํฐํŠธ ๋น„๊ต๊ธฐ

์˜๋ฌธยทํ•œ๊ธ€ Google Fonts๋ฅผ ๋‚˜๋ž€ํžˆ ๋ฏธ๋ฆฌ๋ณด๊ณ  CSS ์ฝ”๋“œ๋ฅผ ๋ณต์‚ฌํ•˜์„ธ์š”. ํ•œ/์˜ ์กฐํ™”(Harmony) ์กฐํ•ฉ๋„ ํ™•์ธํ•˜์„ธ์š”.

Inter

sans-serifModern
Loading fontโ€ฆ

Roboto

sans-serifClassic
Loading fontโ€ฆ

Open Sans

sans-serifFriendly
Loading fontโ€ฆ

Poppins

sans-serifGeometric
Loading fontโ€ฆ

Montserrat

sans-serifBold
Loading fontโ€ฆ

Raleway

sans-serifElegant
Loading fontโ€ฆ

Lato

sans-serifHumanist
Loading fontโ€ฆ

Playfair Display

serifEditorial
Loading fontโ€ฆ

Merriweather

serifReading
Loading fontโ€ฆ

Source Code Pro

monospaceCode
Loading fontโ€ฆ

๋ชจ๋“  ํฐํŠธ๋Š” Google Fonts๋ฅผ ํ†ตํ•ด ๋ฌด๋ฃŒ๋กœ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค. ๋ทฐํฌํŠธ ์ง„์ž… ์‹œ ์ง€์—ฐ ๋กœ๋”ฉ์œผ๋กœ ์„ฑ๋Šฅ์„ ์ตœ์ ํ™”ํ•ฉ๋‹ˆ๋‹ค.


๋‹ค๊ตญ์–ด ํฐํŠธ ๋น„๊ต๊ธฐ๋ž€ ๋ฌด์—‡์ธ๊ฐ€์š”?

๊ตฌ๊ธ€ ํฐํŠธ ๋น„๊ต๊ธฐ(Google Fonts Comparator)๋Š” ์˜๋ฌธ ํฐํŠธ์™€ ํ•œ๊ตญ์–ด ํฐํŠธ๋ฅผ ๋‚˜๋ž€ํžˆ ๋ฏธ๋ฆฌ๋ณด๊ธฐํ•˜๊ณ  CSS ์ฝ”๋“œ๋ฅผ ํ•œ ๋ฒˆ์— ๋ณต์‚ฌํ•  ์ˆ˜ ์žˆ๋Š” ์˜จ๋ผ์ธ ํฐํŠธ ํƒ์ƒ‰ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. ๋””์ž์ด๋„ˆ๋‚˜ ๊ฐœ๋ฐœ์ž๊ฐ€ ํ”„๋กœ์ ํŠธ์— ๋งž๋Š” ํฐํŠธ๋ฅผ ์„ ํƒํ•  ๋•Œ, ์ˆ˜์‹ญ ๊ฐœ์˜ ๊ตฌ๊ธ€ ํฐํŠธ๋ฅผ ํ•œ ํ™”๋ฉด์—์„œ ๋น„๊ตํ•˜๊ณ  ์˜๋ฌธยทํ•œ๊ธ€ ์กฐํ™” ํƒญ์œผ๋กœ ์ตœ์ ์˜ ํฐํŠธ ํŽ˜์–ด๋ง๊นŒ์ง€ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํฐํŠธ๋Š” ํ™”๋ฉด์— ๋ณด์ผ ๋•Œ๋งŒ ๋ ˆ์ด์ง€ ๋กœ๋”ฉ๋˜๋ฏ€๋กœ ํŽ˜์ด์ง€ ์„ฑ๋Šฅ์—๋„ ์˜ํ–ฅ์ด ์—†์Šต๋‹ˆ๋‹ค.

์ฃผ์š” ํ™œ์šฉ ์‚ฌ๋ก€

๐Ÿ–ฅ๏ธ
์›น์‚ฌ์ดํŠธ & ์•ฑ ํฐํŠธ ์„ ์ •
ํ—ค๋”ฉ์šฉ ํฐํŠธ์™€ ๋ณธ๋ฌธ์šฉ ํฐํŠธ๋ฅผ ํ•จ๊ป˜ ๋ฏธ๋ฆฌ๋ณด๋ฉฐ, ์‹ค์ œ ๋ฌธ์žฅ์œผ๋กœ ๊ฐ€๋…์„ฑ๊ณผ ๋ถ„์œ„๊ธฐ๋ฅผ ๋น„๊ตํ•ด ์ตœ์ ์˜ ์กฐํ•ฉ์„ ์ฐพ์Šต๋‹ˆ๋‹ค.
๐Ÿ“ฑ
ํ•œยท์˜ ํ˜ผ์šฉ ๋””์ž์ธ ์ตœ์ ํ™”
ํ•œ๊ตญ์–ด์™€ ์˜์–ด๋ฅผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๋Š” ์„œ๋น„์Šค์—์„œ ๋‘ ์–ธ์–ด๊ฐ€ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ์–ด์šฐ๋Ÿฌ์ง€๋Š” ํฐํŠธ ํŽ˜์–ด๋ง์„ Harmony ํƒญ์—์„œ ์‰ฝ๊ฒŒ ์ฐพ์Šต๋‹ˆ๋‹ค.
โœ๏ธ
๋ธ”๋กœ๊ทธ & ๋ฏธ๋””์–ด ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ
๊ธด ๊ธ€์„ ์ฝ๊ธฐ ํŽธํ•œ ํฐํŠธ, ์ œ๋ชฉ์„ ๋‹๋ณด์ด๊ฒŒ ํ•˜๋Š” ํฐํŠธ๋ฅผ ๋‹ค์–‘ํ•œ ํฌ๊ธฐ๋กœ ๋ฏธ๋ฆฌ ๋ณด๋ฉฐ ๋ธ”๋กœ๊ทธ ์Šคํƒ€์ผ์„ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค.
๐ŸŽจ
๋ธŒ๋žœ๋“œ ์•„์ด๋ดํ‹ฐํ‹ฐ ์ˆ˜๋ฆฝ
๋ธŒ๋žœ๋“œ ์„ฑ๊ฒฉ(๋ชจ๋˜/ํด๋ž˜์‹/์บ์ฃผ์–ผ ๋“ฑ)์— ๋งž๋Š” ํฐํŠธ๋ฅผ ํƒ์ƒ‰ํ•˜๊ณ , CSS ์Šค๋‹ˆํŽซ์„ ๋ฐ”๋กœ ๋ณต์‚ฌํ•ด ๋””์ž์ธ ์‹œ์Šคํ…œ์— ์ ์šฉํ•ฉ๋‹ˆ๋‹ค.

์‚ฌ์šฉ ๋ฐฉ๋ฒ•

  1. 1
    ํƒญ ์„ ํƒ (์˜๋ฌธ / ํ•œ๊ธ€ / Harmony)
    ์˜๋ฌธ ํฐํŠธ, ํ•œ๊ตญ์–ด ํฐํŠธ, ๋˜๋Š” ํ•œยท์˜ ์กฐํ™” ํŽ˜์–ด๋ง ํƒญ์„ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.
  2. 2
    ๋ฏธ๋ฆฌ๋ณด๊ธฐ ํ…์ŠคํŠธ & ํฌ๊ธฐ ์กฐ์ ˆ
    ์ƒ๋‹จ ์ž…๋ ฅ์ฐฝ์— ์‹ค์ œ ์‚ฌ์šฉํ•  ๋ฌธ์žฅ์„ ์ž…๋ ฅํ•˜๊ณ  ํฐํŠธ ํฌ๊ธฐ๋ฅผ ์กฐ์ ˆํ•ด ์‹ค์ œ ํ™˜๊ฒฝ๊ณผ ์œ ์‚ฌํ•˜๊ฒŒ ๋ฏธ๋ฆฌ๋ด…๋‹ˆ๋‹ค.
  3. 3
    CSS ๋ณต์‚ฌ & ํ”„๋กœ์ ํŠธ ์ ์šฉ
    ๋งˆ์Œ์— ๋“œ๋Š” ํฐํŠธ ์นด๋“œ์˜ ๋ณต์‚ฌ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด Google Fonts <link> ์ฝ”๋“œ์™€ font-family CSS๊ฐ€ ํด๋ฆฝ๋ณด๋“œ์— ๋ณต์‚ฌ๋ฉ๋‹ˆ๋‹ค.

์ž์ฃผ ๋ฌป๋Š” ์งˆ๋ฌธ (FAQ)