반응형
Web Development · CSS Webfont
CSS 구글 웹폰트 —
@import · Google Fonts 완전 정리
서버에 폰트 파일 없이도 무료로 한국어 웹폰트 사용
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); .ng-font { font-family: 'Nanum Gothic', 돋움; }
1 구글 웹폰트의 장점
Google Fonts는 전 세계 무료 웹폰트 라이브러리. 폰트 파일을 직접 서버에 안 두고도 사용 가능. 한국어는 Nanum Gothic, Noto Sans KR 등 인기.
※ 장점: ① 무료 ② 서버 용량 절약 ③ 사용자 캐싱 (다른 사이트에서 미리 받았으면 즉시 사용) ④ 자동 최적화
2 두 가지 가져오기 방식
@import (이번 코드)
CSS 파일 안에서
직렬 로드 — 느림
비추천
직렬 로드 — 느림
비추천
<link> (권장)
HTML head에 직접
병렬 로드 — 빠름
모던 표준
병렬 로드 — 빠름
모던 표준
※
@import는 다른 CSS 다 받은 후 시작 → 페이지 표시 지연. <link>가 빠르므로 실무 권장.3 모던 패턴 (2026 권장)
<head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet"> </head>
preconnect로 미리 연결 + display=swap으로 폰트 로딩 중 fallback 보여주기. 페이지 속도 향상의 표준.
반응형
4 폰트 fallback 작성법
font-family: 'Nanum Gothic', '돋움', sans-serif;→ 1순위: 구글 폰트 → 2순위: Windows 기본 한글 → 3순위: 시스템 sans-serif. 어떤 환경에서도 글자가 깨지지 않음.
핵심 한 줄 요약
@importCSS에서 외부 폰트 가져오기 (느림)
<link>HTML에서 — 더 빠름 (권장)
Google Fonts무료 웹폰트 라이브러리
preconnect미리 연결 — 속도 ↑
display=swap로딩 중 fallback 표시
fallback 필수시스템 폰트로 대체
Tags
#@import #구글웹폰트 #Google Fonts #나눔고딕 #font-family #CSS #HTML #웹폰트 #한글폰트 #link #preconnect #웹개발 #티스토리
▼ 티스토리 태그 입력란 복사용
@import, 구글웹폰트, Google Fonts, 나눔고딕, font-family, CSS, HTML, 웹폰트, 한글폰트, link, 웹개발, 티스토리
반응형
'php' 카테고리의 다른 글
| CSS Border — 테두리 스타일·색상·단축 완전 정리 (0) | 2026.05.04 |
|---|---|
| HTML 마켓 전단지 — container · 강조 클래스 종합 완전 정리 (0) | 2026.05.03 |
| CSS 웹폰트 — @font-face 로컬 폰트 완전 정리 (0) | 2026.05.03 |
| CSS text-transform — 대소문자 변환 완전 정리 (0) | 2026.05.03 |
| CSS text-shadow — 텍스트 그림자 · 다중 그림자 · 불꽃 효과 완전 정리 (0) | 2026.05.03 |
댓글