[CSS] 웹 폰트 (Web Font) 적용하는 방법

1. 웹 폰트란?

• 웹 페이지에서 사용하는 글꼴을 서버에서 다운로드하여 화면에 표시하는 기술
• 사용자 PC에 폰트가 없어도 웹사이트에서 폰트를 내려받아 사용

웹페이지 접속 → 브라우저가 폰트 파일 다운로드 → 해당 폰트로 화면 출력

 

2. 웹 폰트 종류

• 요즘 웹에서는 woff / woff2를 가장 많이 사용

종류	설명	풀네임
woff	웹 표준으로 권장되는 웹 폰트 포맷	Web Open Font Format
ttf	일반적으로 많이 사용하는 TrueType 폰트	TrueType Font
eot	Internet Explorer에서 사용하던 폰트	Embedded OpenType
svg	벡터 기반 폰트 (현재 거의 사용 안함)	Scalable Vector Graphics
woff2	WOFF보다 압축률이 높은 최신 웹 폰트	Web Open Font Format 2

 

3. 웹 폰트 적용

1) @font-face

• 웹 서버에 폰트를 올리고 CSS에서 불러오는 방법

@font-face {
    font-family: 폰트이름;
    src: url("폰트파일경로");
}

/* fonts/script9.woff 파일을 SCRIPT9Web 이라는 이름으로 사용 */
@font-face {
    font-family: "SCRIPT9Web";
    src: url("fonts/script9.woff") format("woff"),
         url("fonts/script9.ttf") format("truetype");
}

.html5demo {
    font-family: "SCRIPT9Web";
}

 

 

2) Google Font

fonts.google.com 접속 → 폰트 선택 → Get embed code 클릭 → HTML에 붙여넣기

<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=Bungee+Spice&display=swap" rel="stylesheet">

<style>
	body {
    font-family: 'Bungee Spice', serif;
	}
</style>

• rel=“preconnect” : 외부 서버와의 DNS, TCP, TLS 연결을 미리 준비하여 리소스 로딩 속도를 빠르게 하기 위한 기능
• crossorigin : 다른 도메인 리소스 접근 허용하겠다는 의미

 

4.  웹폰트 적용 시 주의사항 : CORS 설정

• Cross-Origin Resource Sharing
• 다른 도메인의 자원을 가져올 수 있도록 허용하는 규칙
• 웹 폰트는 다른 서버에서 불러올 때 CORS 문제가 발생할 수 있음

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- 다른 도메인(fonts.gstatic.com)의 리소스를 CORS 방식으로 사용할 준비를 한다-->