Open Sans
sans-serifFriendly
Poppins
sans-serifGeometric
Playfair Display
serifEditorial
Source Code Pro
monospaceCode
๋ชจ๋ ํฐํธ๋ Google Fonts๋ฅผ ํตํด ๋ฌด๋ฃ๋ก ์ ๊ณต๋ฉ๋๋ค. ๋ทฐํฌํธ ์ง์
์ ์ง์ฐ ๋ก๋ฉ์ผ๋ก ์ฑ๋ฅ์ ์ต์ ํํฉ๋๋ค.
๋ค๊ตญ์ด ํฐํธ ๋น๊ต๊ธฐ๋ ๋ฌด์์ธ๊ฐ์?
๊ตฌ๊ธ ํฐํธ ๋น๊ต๊ธฐ(Google Fonts Comparator)๋ ์๋ฌธ ํฐํธ์ ํ๊ตญ์ด ํฐํธ๋ฅผ ๋๋ํ ๋ฏธ๋ฆฌ๋ณด๊ธฐํ๊ณ CSS ์ฝ๋๋ฅผ ํ ๋ฒ์ ๋ณต์ฌํ ์ ์๋ ์จ๋ผ์ธ ํฐํธ ํ์ ๋๊ตฌ์
๋๋ค. ๋์์ด๋๋ ๊ฐ๋ฐ์๊ฐ ํ๋ก์ ํธ์ ๋ง๋ ํฐํธ๋ฅผ ์ ํํ ๋, ์์ญ ๊ฐ์ ๊ตฌ๊ธ ํฐํธ๋ฅผ ํ ํ๋ฉด์์ ๋น๊ตํ๊ณ ์๋ฌธยทํ๊ธ ์กฐํ ํญ์ผ๋ก ์ต์ ์ ํฐํธ ํ์ด๋ง๊น์ง ์ฐพ์ ์ ์์ต๋๋ค. ํฐํธ๋ ํ๋ฉด์ ๋ณด์ผ ๋๋ง ๋ ์ด์ง ๋ก๋ฉ๋๋ฏ๋ก ํ์ด์ง ์ฑ๋ฅ์๋ ์ํฅ์ด ์์ต๋๋ค.
์ฃผ์ ํ์ฉ ์ฌ๋ก
๐ฅ๏ธ
์น์ฌ์ดํธ & ์ฑ ํฐํธ ์ ์
ํค๋ฉ์ฉ ํฐํธ์ ๋ณธ๋ฌธ์ฉ ํฐํธ๋ฅผ ํจ๊ป ๋ฏธ๋ฆฌ๋ณด๋ฉฐ, ์ค์ ๋ฌธ์ฅ์ผ๋ก ๊ฐ๋
์ฑ๊ณผ ๋ถ์๊ธฐ๋ฅผ ๋น๊ตํด ์ต์ ์ ์กฐํฉ์ ์ฐพ์ต๋๋ค.
๐ฑ
ํยท์ ํผ์ฉ ๋์์ธ ์ต์ ํ
ํ๊ตญ์ด์ ์์ด๋ฅผ ํจ๊ป ์ฌ์ฉํ๋ ์๋น์ค์์ ๋ ์ธ์ด๊ฐ ์์ฐ์ค๋ฝ๊ฒ ์ด์ฐ๋ฌ์ง๋ ํฐํธ ํ์ด๋ง์ Harmony ํญ์์ ์ฝ๊ฒ ์ฐพ์ต๋๋ค.
โ๏ธ
๋ธ๋ก๊ทธ & ๋ฏธ๋์ด ํ์ดํฌ๊ทธ๋ํผ
๊ธด ๊ธ์ ์ฝ๊ธฐ ํธํ ํฐํธ, ์ ๋ชฉ์ ๋๋ณด์ด๊ฒ ํ๋ ํฐํธ๋ฅผ ๋ค์ํ ํฌ๊ธฐ๋ก ๋ฏธ๋ฆฌ ๋ณด๋ฉฐ ๋ธ๋ก๊ทธ ์คํ์ผ์ ๊ฒฐ์ ํฉ๋๋ค.
๐จ
๋ธ๋๋ ์์ด๋ดํฐํฐ ์๋ฆฝ
๋ธ๋๋ ์ฑ๊ฒฉ(๋ชจ๋/ํด๋์/์บ์ฃผ์ผ ๋ฑ)์ ๋ง๋ ํฐํธ๋ฅผ ํ์ํ๊ณ , CSS ์ค๋ํซ์ ๋ฐ๋ก ๋ณต์ฌํด ๋์์ธ ์์คํ
์ ์ ์ฉํฉ๋๋ค.
์ฌ์ฉ ๋ฐฉ๋ฒ
- 1
ํญ ์ ํ (์๋ฌธ / ํ๊ธ / Harmony)
์๋ฌธ ํฐํธ, ํ๊ตญ์ด ํฐํธ, ๋๋ ํยท์ ์กฐํ ํ์ด๋ง ํญ์ ์ ํํฉ๋๋ค.
- 2
๋ฏธ๋ฆฌ๋ณด๊ธฐ ํ
์คํธ & ํฌ๊ธฐ ์กฐ์
์๋จ ์
๋ ฅ์ฐฝ์ ์ค์ ์ฌ์ฉํ ๋ฌธ์ฅ์ ์
๋ ฅํ๊ณ ํฐํธ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํด ์ค์ ํ๊ฒฝ๊ณผ ์ ์ฌํ๊ฒ ๋ฏธ๋ฆฌ๋ด
๋๋ค.
- 3
CSS ๋ณต์ฌ & ํ๋ก์ ํธ ์ ์ฉ
๋ง์์ ๋๋ ํฐํธ ์นด๋์ ๋ณต์ฌ ๋ฒํผ์ ํด๋ฆญํ๋ฉด Google Fonts <link> ์ฝ๋์ font-family CSS๊ฐ ํด๋ฆฝ๋ณด๋์ ๋ณต์ฌ๋ฉ๋๋ค.
์์ฃผ ๋ฌป๋ ์ง๋ฌธ (FAQ)