728x90
웹폰트란?
웹폰트(Web Font)는 웹사이트에서 사용되는 글꼴을 사용자의 컴퓨터에 설치된 폰트가 아니라, 웹에서 불러와 적용하는 방식입니다. 이를 통해 디자이너가 의도한 디자인을 유지하면서도 모든 사용자에게 일관된 타이포그래피 경험을 제공할 수 있습니다.
웹폰트를 적용하는 방법
웹폰트를 적용하는 방법은 크게 세 가지로 나눌 수 있습니다.
1. Google Fonts 사용하기 (가장 쉬운 방법)
Google Fonts는 무료로 제공되며, 링크 한 줄만 추가하면 간편하게 사용할 수 있습니다.
적용 방법:
- Google Fonts 사이트 접속 (https://fonts.google.com/)
- 원하는 폰트를 선택하고 "Embed" 탭에서 <link> 태그 복사
- HTML 파일의 <head> 태그 안에 추가
- CSS에서 해당 폰트를 적용
<head>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
</head>body {
font-family: 'Noto Sans KR', sans-serif;
}2. @font-face를 이용한 직접 적용
직접 웹폰트 파일을 업로드하여 사용할 수도 있습니다. 이 방법은 커스텀 폰트 적용이 가능하며, 외부 서비스 의존성을 줄일 수 있습니다.
적용 방법:
- .woff, .woff2, .ttf, .eot 등의 웹폰트 파일 준비
- 폰트 파일을 서버에 업로드
- CSS 파일에 @font-face 선언
- CSS에서 해당 폰트를 적용
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom-font.woff2') format('woff2'),
url('/fonts/custom-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'CustomFont', sans-serif;
}3. Adobe Fonts (구 Typekit) 사용하기
Adobe Fonts는 유료 서비스이지만, 다양한 고품질 폰트를 제공합니다.
적용 방법:
- Adobe Fonts 사이트에서 원하는 폰트를 선택
- 제공되는 <link> 태그를 <head>에 추가
- CSS에서 해당 폰트를 적용
<head>
<link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css">
</head>body {
font-family: 'Your Adobe Font', sans-serif;
}브라우저별 웹폰트 확장자 정리
각 브라우저에서 지원하는 웹폰트 확장자가 다르기 때문에 여러 포맷을 준비하는 것이 좋습니다.
확장자설명지원 브라우저
| .woff | 가장 일반적인 웹폰트 포맷 | 크롬, 파이어폭스, 사파리, 엣지, 오페라 |
| .woff2 | 최신 압축 방식, 더 작은 용량 | 크롬, 파이어폭스, 사파리, 엣지, 오페라 |
| .ttf | 트루타입 폰트, 구형 브라우저 지원 | 크롬, 파이어폭스, 사파리, 엣지 |
| .eot | 인터넷 익스플로러 전용 | IE 전용 (IE8 이하) |
| .svg | 벡터 기반 폰트, 거의 사용되지 않음 | 사파리 iOS 4 이하 |
TIP: 일반적으로 .woff2와 .woff만 제공하면 대부분의 최신 브라우저에서 정상적으로 웹폰트가 표시됩니다.
웹폰트 사용 시 주의할 점
- 파일 용량 최적화: 큰 용량의 웹폰트는 로딩 속도를 저하시킬 수 있습니다. 필요 없는 글리프를 제거하여 용량을 줄이는 것이 좋습니다.
- 웹 접근성 고려: 기본 폰트(Fallback)를 설정하여 웹폰트가 로드되지 않을 때도 가독성이 유지되도록 해야 합니다.
- 라이선스 확인: 웹폰트는 저작권이 있으므로 무료 폰트라도 라이선스를 반드시 확인해야 합니다.
body {
font-family: 'CustomFont', Arial, sans-serif;
}마무리
웹폰트는 웹 디자인에서 필수적인 요소이며, 다양한 방법으로 적용할 수 있습니다. Google Fonts 같은 간단한 방법부터, 직접 업로드하는 방법까지 각각의 장단점이 있으므로 프로젝트에 맞는 방식을 선택하는 것이 중요합니다.
웹사이트의 타이포그래피를 더욱 아름답고 일관되게 유지하고 싶다면, 지금 바로 웹폰트를 적용해보세요!
반응형
'WWW > Web' 카테고리의 다른 글
| Vercel이란? 개발자를 위한 최고의 클라우드 플랫폼과 플랜별 특징 (3) | 2025.02.27 |
|---|---|
| 📱 반응형 웹(Responsive Web)이란? (0) | 2025.02.25 |
| 🌍 크로스브라우징, 왜 필요할까? 🚀 (0) | 2025.02.25 |
| ✨ 초강력 슬라이더 라이브러리! Swiper.js 완벽 가이드 🚀 (0) | 2025.02.25 |
| CSS Grid 속성 완벽 정리: 레이아웃 설계의 강력한 도구 (0) | 2025.02.25 |
