์›นํฐํŠธ(Web Font)

๐Ÿ“„ ์›นํฐํŠธ(Web Font)

์›น ํฐํŠธ๋ž€ ์‚ฌ์šฉ์ž๊ฐ€ ๋กœ์ปฌ์— ํฐํŠธ๋ฅผ ์„ค์น˜ํ•˜์ง€ ์•Š์•„๋„, ํŠน์ • ์„œ๋ฒ„์— ์œ„์น˜ํ•œ ํฐํŠธ๋ฅผ ๋‹ค์šด๋ฐ›์•„ ์›นํŽ˜์ด์ง€์— ํ‘œ์‹œ๋˜๋Š” ํฐํŠธ์ž…๋‹ˆ๋‹ค.

๐Ÿ“„ ์›นํฐํŠธ ์ ์šฉ ๋ฐฉ๋ฒ•

1. @font-face ์ด์šฉ

  1. ์›นํฐํŠธ ํŒŒ์ผ์„ ์ค€๋น„ํ•œ๋‹ค.
  2. CSS ๋ฌธ์„œ์—์„œ @font-family๋ฅผ ์ด์šฉํ•ด ํฐํŠธ ํŒŒ์ผ์„ ๋ถˆ๋Ÿฌ์˜จ๋‹ค.
  3. ๋ถˆ๋Ÿฌ์˜จ ํฐํŠธ ํŒŒ์ผ์„ ์ด์šฉํ•ด ์ƒˆ๋กœ์šด font-family๋ฅผ ๋งŒ๋“ ๋‹ค.
  4. ๋งŒ๋“  font-family๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

@font-face๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•๋ณด๋‹ค ๋” ๊ฐ„ํŽธํ•œ ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค.

2. import ์ด์šฉ

  1. ๊ตฌ๊ธ€ ํฐํŠธ์— ์ ‘์†ํ•ด์„œ ์›ํ•˜๋Š” ํฐํŠธ๋ฅผ ์ฐพ๋Š”๋‹ค.
  2. ์›ํ•˜๋Š” ๊ตต๊ธฐ์˜ ํฐํŠธ ์˜†์— ์žˆ๋Š” Select this style๋ฅผ ํด๋ฆญํ•œ๋‹ค.
  3. Use on web ํ•ญ๋ชฉ์—์„œ import๋ฅผ ์„ ํƒํ•˜๊ณ  ํ•ด๋‹น import ๊ตฌ๋ฌธ์„ cssํŒŒ์ผ ๋‚ด์— ์ž…๋ ฅํ•œ๋‹ค.
// index.css

@import url("https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap");

div {
  font-family: "Nanum Pen Script", cursive;
}

Leave a comment