1. Google Fonts 적용하기
1-1. 적용 방법
- Google Fonts 사이트 접속
- 원하는 폰트를 검색하고 선택
- "Get font" → "<>Get embed code"를 복사하여 프로젝트에 추가
1-2. Link 방식
HTML 파일의 <head> 태그에 추가
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">preconnect란?
HTML이 렌더링되기 전에 특정 URL과 미리 연결하여 리소스 로딩 시간을 단축시키는 기능임
CSS에서 폰트 사용
font-family 속성 사용 예시
.custom-text {
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
.custom-text-bold {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}- font-family: 적용할 폰트를 지정
- font-weight: 폰트의 굵기를 지정 (400: 기본, 700: 굵게)
여러 폰트를 콤마(,)로 구분하여 지정하면, 앞의 폰트가 없을 경우 다음 폰트가 적용됨
1-3. @import 방식
CSS 파일의 최상단에 추가
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');Link와 @import 비교
- Link 방식: 병렬로 리소스를 로드하여 더 빠른 로딩이 가능함
- @import 방식: CSS 파일이 순차적으로 로드되므로 로딩 속도가 느려질 수 있음
💡 권장: 성능 최적화를 위해 Link 방식을 사용하는 것이 좋음
css 폰트 사용 link와 동일
1-4. Swap과 Block의 차이
swap 속성
폰트 로드 전까지 시스템 폰트를 먼저 표시한 뒤, 로드 완료 시 지정한 폰트로 교체.
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');block 속성
폰트 로드 전까지 텍스트를 보이지 않게 한 뒤, 로드 완료 시 표시.
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=block');2. 눈누 폰트 적용하기
눈누 폰트는 한글 폰트에 특화된 무료 폰트 플랫폼으로, 상업적으로도 이용 가능
적용 방법
- 눈누 폰트 사이트 접속.
- 원하는 폰트를 선택 후 WEB 버튼 클릭.
- 제공된 @font-face 코드를 CSS 파일에 추가.
예제:
@font-face {
font-family: 'BagelFatOne-Regular';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_JAMO@1.0/BagelFatOne-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.bagelfatone {
font-family: 'BagelFatOne-Regular';
}3. 다운로드 폰트 사용하기
웹 프로젝트에서 폰트 파일을 직접 다운로드하여 사용하는 방법
적용 방법
- 원하는 폰트 파일(.woff, .woff2, .ttf 등) 다운로드
- 프로젝트 내
fonts폴더에 저장 - CSS 파일에서 @font-face로 선언
예제:
@font-face {
font-family: 'CustomFont';
src: url('../fonts/custom-font.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}⚠️ 저작권 확인 필수: 폰트를 사용하기 전에 반드시 저작권 범위 확인 필요
✅ 항상 woff2를 먼저 불러오도록 먼저 배치
⇒ woff2를 지원하지 못하는 경우에만 woff를 불러오도록 배치하는 것이 퍼포먼스 향상에 도움
woff와 woff2의 차이
.woff (Web Open Font Format)
- 압축: zlib 기반.
- 파일 크기:
.ttf보다 작지만.woff2보다는 큼. - 호환성: 오래된 브라우저와도 호환 가능.
.woff2 (Web Open Font Format 2)
- 압축: Brotli 알고리즘 기반.
- 파일 크기:
.woff보다 20-30% 더 작음. - 호환성: 최신 브라우저에서 지원.
프론트엔드 공부 기록 아카이빙🍁