웹 글꼴을 불러오고 fallback·성능 전략을 이해합니다.
@font-face는 글꼴 파일과 family 이름, weight, style을 등록합니다. woff2를 우선하고 font-display로 로딩 중 텍스트 표시 방식을 정하며 적절한 시스템 fallback을 둡니다.
이번 예제의 출발점은 @font-face { font-family: MyFont; src: url(...woff2); font-display: swap; }입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 fallback 순서를 바꾸고 사용 가능한 글꼴을 비교하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
한글 전체 굵기를 모두 내려받으면 초기 로딩 용량이 매우 커질 수 있습니다.
직접 바꿔보세요fallback 순서를 바꾸고 사용 가능한 글꼴을 비교하세요.