Notice
Recent Posts
Recent Comments
Link
Β«   2026/05   Β»
일 μ›” ν™” 수 λͺ© 금 ν† 
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Tags
more
Archives
Today
Total
관리 메뉴

η„‘μ œ

Web font λ³Έλ¬Έ

<style>

Web font

yo-u-loo 2026. 3. 16. 14:01

 

πŸŸ’β€Š β€ŠWeb font

μ‚¬μš©μžμ˜ 컴퓨터에 μ„€μΉ˜λ˜μ–΄ μžˆμ§€ μ•Šμ•„λ„ μ›Ήμ‚¬μ΄νŠΈμ—μ„œ λ‹€μš΄λ‘œλ“œλ˜μ–΄ ν‘œμ‹œλ˜λŠ” κΈ€κΌ΄.

  • 기본적으둜 웹은 μ‚¬μš©μžμ˜ 컴퓨터에 μžˆλŠ” 폰트만 μ‚¬μš©ν•  수 μžˆλ‹€.
    ν•˜μ§€λ§Œ μ›Ή 폰트λ₯Ό μ‚¬μš©ν•˜λ©΄ μ–΄λ–€ κΈ°κΈ°μ—μ„œλ„ λ™μΌν•œ λ””μžμΈμ˜ 글꼴을 보여쀄 수 μžˆλ‹€.

 

 

βœŒπŸ»β€Š μ›Ή 폰트 μ‚¬μš© 방법 (2가지) ✌🏻

1️⃣ μ™ΈλΆ€ μ„œλΉ„μŠ€ 이용 (CDN - Google Fonts, Adobe Fonts λ“±)

폰트 μ„œλΉ„μŠ€λ₯Ό μ œκ³΅ν•˜λŠ” μ‚¬μ΄νŠΈμ—μ„œ λ§ν¬λ₯Ό 가져와 μ‚¬μš©ν•˜λŠ” 방법.

  • μ‚¬μš©μ΄ 맀우 쉬움.
  • μ„œλ²„μ— 폰트 μ—…λ‘œλ“œ ν•„μš” μ—†μŒ.
  • 인터넷 μ—°κ²° ν•„μš”.

 

<head>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
<style>
   body {
       font-family: 'MyCustomFont', sans-serif;
   }
  • <link>: HTML 파일의 <head> 뢀뢄에 넣을 λ•Œ μ‚¬μš©. (μ„±λŠ₯ 상 κ°€μž₯ μœ λ¦¬ν•΄ ꢌμž₯ν•˜λŠ” 방법)

 

<style>
    @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');
  • @import: CSS 파일(.css) 내뢀에 직접 λ„£κ³  싢을 λ•Œ μ‚¬μš©.

 

 

2️⃣ μ„œλ²„μ— 직접 μ—…λ‘œλ“œ (@font-face)

μ›Ή μ„œλ²„μ— ν°νŠΈ νŒŒμΌμ„ μ—…λ‘œλ“œν•˜μ—¬ μ‚¬μš©ν•˜λŠ” 방법.

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/myfont.woff2') format('woff2');
}

body {
  font-family: 'MyCustomFont', sans-serif;
}
  • μ™ΈλΆ€ μ„œλΉ„μŠ€ 의쑴 μ—†μŒ.
  • λ‘œλ”© μ œμ–΄ κ°€λŠ₯.
  • μ„œλ²„μ— 폰트 파일 관리 ν•„μš”.

 

 

πŸ”Ήβ€Šβ€Š μ›Ή 폰트 파일 ν˜•μ‹

μ›Ήμ—μ„œ 자주 μ‚¬μš©ν•˜λŠ” 폰트 파일 ν˜•μ‹.

  • WOFF (Web Open Font Format): μ›Ήμ—μ„œ μ‚¬μš©ν•˜κΈ° μœ„ν•΄ λ§Œλ“€μ–΄μ§„ ν‘œμ€€ μ›Ή 폰트 ν˜•μ‹.
    • κΈ°μ‘΄ 폰트(TTF, OTF)λ₯Ό μ••μΆ•ν•œ ν˜•μ‹, 파일 크기가 μž‘μŒ, λͺ¨λ“  λΈŒλΌμš°μ € 지원.
  • WOFF2: WOFF의 κ°œμ„  λ²„μ „μœΌλ‘œ μ΅œμ‹  μ›Ή 폰트 ν˜•μ‹. (아직 ν‘œμ€€ν™” X)
    • μ›Ή μ„±λŠ₯ μ΅œμ ν™”, κ°€μž₯ 높은 μ••μΆ•λ₯ , νŽ˜μ΄μ§€ λ‘œλ”© 속도 κ°œμ„ , μ΅œμ‹  λΈŒλΌμš°μ € 지원.
  • TTF / OTF: μΌλ°˜ 폰트 ν˜•μ‹.
  • EOT: μ˜›λ‚  Internet Explorer μ „μš© 폰트 ν˜•μ‹.

 

 

βœ‚οΈ μ„±λŠ₯ μ΅œμ ν™” TIP βœ‚οΈ

  • subset (μ„œλΈŒμ…‹): 일뢀 문자만 μ‚¬μš©ν•œλ‹€λ©΄ λΆˆν•„μš”ν•œ λ¬ΈμžλŠ” 제거. (μ˜μ–΄ μ‚¬μ΄νŠΈ → ν•œκΈ€ 제거, 숫자만 ν•„μš”ν•œ 경우 → 숫자만 포함)
  • font-display: 폰트 λ‘œλ”© 쀑 ν…μŠ€νŠΈκ°€ 보이지 μ•ŠλŠ” 문제(FOIT)λ₯Ό ν•΄κ²°ν•œλ‹€. (font-display: swap)
    • swap: λ¨Όμ € κΈ°λ³Έ 폰트 ν‘œμ‹œ ν›„ μ›Ή 폰트 적용. (주둜 μ‚¬μš©)
    • block: 폰트 λ‘œλ”© μ „ ν…μŠ€νŠΈ μˆ¨κΉ€.
    • fallback: 짧게 κΈ°λ‹€λ¦° ν›„ κΈ°λ³Έ 폰트 μ‚¬μš©.

 

 

🌟 2026λ…„ ν˜„μž¬ νŠΈλ Œλ””ν•˜κ³  싀무 ν™œμš©λ„κ°€ 높은 μ›Ήν°νŠΈ 🌟

πŸ‡°πŸ‡· ν•œκΈ€ 폰트

  • ν•œκΈ€ UI λ””μžμΈμ˜ 핡심은 가독성과 λ‹€μ–‘ν•œ λ‘κ»˜.
폰트λͺ… μš©λ„ νŠΉμ§• μ‚¬μš© λΆ„μ•Ό
Noto Sans KR κ°€μž₯ 많이 μ“°λŠ” κΈ°λ³Έ ν•œκΈ€ μ›Ήν°νŠΈ κΉ”λ”ν•œ Sans-serif, 가독성 μ’‹μŒ, λ‹€μ–‘ν•œ κ΅΅κΈ° 제곡 μ›Ήμ‚¬μ΄νŠΈ λ³Έλ¬Έ, UI λ””μžμΈ, λΈ”λ‘œκ·Έ
Pretendard 졜근 개발자 + λ””μžμ΄λ„ˆ μ‚¬μ΄μ—μ„œ κ°€μž₯ 인기 Inter 기반 ν•œκΈ€ 폰트, UI/UX μ΅œμ ν™”, 맀우 κΉ”λ”ν•œ λ””μžμΈ SaaS, μŠ€νƒ€νŠΈμ—…, μ„œλΉ„μŠ€ μ›Ήμ‚¬μ΄νŠΈ
Spoqa Han Sans Neo κΈ°μ—… μ‚¬μ΄νŠΈμ—μ„œ 많이 μ‚¬μš© μ•ˆμ •μ μΈ 가독성, κ· ν˜• 작힌 λ””μžμΈ κΈ°μ—… ν™ˆνŽ˜μ΄μ§€, μ„œλΉ„μŠ€ νŽ˜μ΄μ§€
Nanum Gothic μ˜€λž«λ™μ•ˆ μ‚¬μš©λœ 무료 ν•œκΈ€ 폰트 넀이버 μ œμž‘, μ•ˆμ •μ μΈ 가독성 λΈ”λ‘œκ·Έ, 일반 μ›Ήμ‚¬μ΄νŠΈ
SUIT 졜근 UI λ””μžμΈμ—μ„œ 인기 ν˜„λŒ€μ μΈ μŠ€νƒ€μΌ, λ‹€μ–‘ν•œ weight μŠ€νƒ€νŠΈμ—…, μ•± UI

 

πŸ‡ΊπŸ‡Έ 영문 폰트

  • 영문 UI λ””μžμΈμ˜ 핡심은 κΈ°ν•˜ν•™μ  ꡬ쑰와 ν™”λ©΄ 해상도 λŒ€μ‘λ ₯.
폰트λͺ… μš©λ„ νŠΉμ§• μ‚¬μš© λΆ„μ•Ό
Inter ν˜„μž¬ UI λ””μžμΈ ν‘œμ€€ 폰트 UI μ΅œμ ν™”, Variable font, 맀우 높은 가독성 SaaS, μ›Ήμ•±, λŒ€μ‹œλ³΄λ“œ
Poppins μŠ€νƒ€νŠΈμ—… λ””μžμΈμ—μ„œ 인기 λ‘₯κ·Ό ν˜•νƒœ, 젊고 ν˜„λŒ€μ μΈ λŠλ‚Œ λžœλ”©νŽ˜μ΄μ§€, λΈŒλžœλ“œ μ‚¬μ΄νŠΈ
Montserrat ν—€λ“œλΌμΈμš©μœΌλ‘œ 많이 μ‚¬μš© κ°•ν•œ 인상, 제λͺ© λ””μžμΈμ— μ’‹μŒ λΈŒλžœλ“œ λ””μžμΈ, λ§ˆμΌ€νŒ… νŽ˜μ΄μ§€
DM Sans κΉ”λ”ν•œ UI 폰트 λ―Έλ‹ˆλ©€ λ””μžμΈ, 읽기 νŽΈν•¨ μ•±, μŠ€νƒ€νŠΈμ—… μ›Ήμ‚¬μ΄νŠΈ
Playfair Display Serif μŠ€νƒ€μΌ κ³ κΈ‰μŠ€λŸ¬μš΄ λŠλ‚Œ, νŒ¨μ…˜ / 맀거진 μŠ€νƒ€μΌ λΈŒλžœλ“œ, λΈ”λ‘œκ·Έ

 

'<style>' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

text style 속성  (0) 2026.03.17
color 속성  (0) 2026.03.17
font 속성  (0) 2026.03.13
μš°μ„ μˆœμœ„(Precedence)와 상속(Inheritance)  (0) 2026.03.13
Selectors (μ„ νƒμž) νƒ€μž…  (0) 2026.03.13
'<style>' Related Articles more