반응형
HTML 파일에서 CSS를 사용해 Font 스타일을 설정하는 방법을 2개 토픽으로 알아보자.
1. Google Fonts 와 같은 font 제공 서비스에서 제공하는 font에 대한 정보를 CSS 파일로 확보한 뒤 font 파일에 접근하기.
Google Fonts의 검색에서 "Gugi"를 선택해봤다. 우측의 "Get font"를 누른다.
우측의 "Get embed code"를 클릭한다.
"Embed code in the <head> of your html" 밑의 코드를 복사해서 html 파일의 <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=Gugi&display=swap" rel="stylesheet">- <link rel="preconnect" href="https://fonts.googleapis.com"> : 브라우저가 fonts.googleapis.com 서버에 미리 연결하도록 요청해서, 서버와의 DNS 조회 및 SSL 연결 시간을 줄여 font를 더 빨리 로드하도록 한다.
- fonts.googleapis.com 서버는 폰트 설정(CSS 파일)을 제공하는 서버이다.
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>: fonts.gstatic.com 서버에 미리 연결하고, crossorigin 속성을 설정한다. Font 파일을 빠르게 로드하면서 CORS 문제를 방지하는 역할이다.
- fonts.gstatic.com 서버는 Google Fonts의 실제 font 파일을 제공하는 고속 서버이다.
- Google은 전 세계에 분산된 서버(CDN - Content Delivery Network)를 사용해 font를 빠르게 제공한다. fonts.gstatic.com은 Google의 CDN에 연결된 서버로, 가까운 위치의 서버에서 font 파일을 다운로드받을 수 있도록 최적화된다.
- Font 파일은 CORS를 통해 로드된다. 그래서 crossorigin 속성을 설정해 폰트 파일을 문제없이 가져오도록 해야 한다. Font 파일은 웹 브라우저의 보안 정책상 반드시 CORS 허용 설정이 되어야 다른 출처에서 사용할 수 있기 때문이다.
- <link href="https://fonts.googleapis.com/css2?family=Gugi&display=swap" rel="stylesheet">: Google Fonts의 Gugi font(CSS 파일)를 불러온다.
- 동작 과정
- HTML 파싱: 브라우저가 <link> 태그를 만나면 **href**에 지정된 URL인 https://fonts.googleapis.com/css2?family=Gugi&display=swap로 요청(Request)을 보낸다.
- fonts.googleapis.com 서버는 요청된 폰트의 설정 정보를 담은 CSS 파일을 반환한다.
- 이 CSS 파일에는 폰트 파일(실제 리소스)이 어디에 있는지 @font-face로 정의되어 있다.
- 브라우저는 CSS 파일을 확인한 후, 폰트 파일이 저장된 fonts.gstatic.com에 접근해 실제 폰트 파일(.ttf)을 다운로드한다.
- 폰트 파일이 모두 로드되면, 지정된 텍스트에 폰트를 적용한다.
- 이 과정에서 display=swap 옵션 덕분에 폰트 로딩 전에는 기본 폰트(fallback font)를 사용하다가, 폰트 로딩이 완료되면 화면에 적용된다.
- (CSS 파일 예시)
- 동작 과정
@font-face {
font-family: 'Gugi';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/gugi/v10/A2BVn5dXywshVKG1QnWJovb6aFU.ttf) format('truetype');
}
<style> 태그에 아래 예시와 같이 font-family를 설정한다.
html {
font-family: "Gugi";
font-weight: 400;
font-style: normal;
}
Gugi를 적용한 HTML 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<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=Gugi&display=swap" rel="stylesheet">
</head>
<style>
html {
font-family: "Gugi";
font-weight: 400;
font-style: normal;
}
.normal {
font-weight: normal;
}
.bold {
font-weight: bold;
}
.custom {
font-weight: 900;
}
</style>
<body>
<p>안녕하세요</p>
<p class="normal">안녕하세요</p>
<p class="bold">안녕하세요</p>
<p class="custom">안녕하세요</p>
</body>
</html>위 코드는 아래와 같이 화면을 렌더한다.
※ 참고: fonts.googleapis.com에서부터 로드된 CSS 파일의 @font-face의 역할
@font-face는 CSS 규칙 중 하나로, 웹페이지에서 custom font를 사용할 수 있게 해준다. 이 규칙을 사용하면 로컬 font가 아닌 외부 font를 가져와 웹페이지에 적용할 수 있다.
역할
- Font 파일 선언: 웹페이지에서 사용할 font 파일을 지정한다. 다양한 형식(woff2, woff, ttf, eot 등)을 지원한다.
- Custom font 이름 설정: font에 이름(font-family)을 부여해 나중에 CSS에서 해당 font를 사용할 수 있게 한다.
- 다양한 font 스타일 정의: font 굵기(font-weight), 스타일(font-style), 문자 범위(unicode-rage, 선택 사항) 등을 지정할 수 있다.
기본 문법
@font-face {
font-family: 'CustomFont'; /* 사용할 font의 이름 */
src: url('CustomFont.woff2') format('woff2'),
url('CustomFont.woff') format('woff'); /* font 파일 경로 및 형식 */
font-weight: normal; /* font 굵기 */
font-style: normal; /* font 스타일 */
}
2. 직접 @font-face를 HTML <style> 태그에 정의해서 Custom Font를 쓰는 방법
@font-face 규칙을 직접 <style> 태그에 입력해서 사용하는 방법이다.
방법 1. 외부 서버에서 제공하는 font file을 사용할 수 있도록 @font-face를 직접 명시하기
눈누에서 제공하는 "쿠키런 글꼴" font를 사용해보자.
https://noonnu.cc/font_page/322
눈누
쿠키런 - 데브시스터즈(주)
noonnu.cc
우측의 "웹폰트로 사용"의 @font-face 코드를 복사한다.
복사한 코드를 아래처럼 HTML 파일에 붙여넣는다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: "GmarketSansMedium";
src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff");
font-weight: normal;
font-style: normal;
}
p {
font-family: "GmarketSansMedium";
}
.normal {
font-weight: normal;
}
.bold {
font-weight: bold;
}
.custom {
font-weight: 900;
}
</style>
</head>
<body>
<p>안녕하세요</p>
<p class="normal">안녕하세요</p>
<p class="bold">안녕하세요</p>
<p class="custom">안녕하세요</p>
</body>
</html>font-family는 "GmarketSansMedium"로 정의되있고, p에 적용하였다.
위 코드는 아래와 같이 화면을 렌더한다.
방법 2. 로컬에 저장되있는 font 파일을 사용하도록 @font-face에서 직접 명시하기
로컬(웹 페이지의 디렉터리 기준)에 font 파일이 있다면, 이를 사용할 수 있다.
아래는 인터넷에서 "온글잎 박다현체" font 파일을 다운로드해서 로컬에서 사용한 예시이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: "Ownglyph_ParkDaHyun";
src: url("./온글잎박다현체.ttf") format("woff");
font-weight: normal;
font-style: normal;
}
p {
font-family: "Ownglyph_ParkDaHyun";
}
.normal {
font-weight: normal;
}
.bold {
font-weight: bold;
}
.custom {
font-weight: 900;
}
</style>
</head>
<body>
<p>안녕하세요</p>
<p class="normal">안녕하세요</p>
<p class="bold">안녕하세요</p>
<p class="custom">안녕하세요</p>
</body>
</html>위 코드는 아래와 같이 화면을 렌더한다.
요약
HTML 파일에서 CSS를 사용해 Font 스타일을 설정하는 방법을 아래와 같이 나눠서 알아보았다.
- Font 제공 서비스에서 제공하는 font 관련 정보(CSS 파일)를 먼저 확보한 다음, 해당 CSS 파일에 명시된 정보를 통해 외부 서버에 위치한 font 파일에 접근하기
- @font-face 직접 명시하기
- 외부 서버에서 제공하는 font file을 사용할 수 있도록 @font-face에 직접 명시하기
- 로컬에 저장되있는 font 파일을 사용하도록 @font-face에 직접 명시하기
반응형
'HTML&CSS' 카테고리의 다른 글
| [HTML&CSS] CSS Box Model (0) | 2024.12.18 |
|---|---|
| [HTML&CSS] HTML Boilerplate & HTML 기본 구조 (2) | 2024.12.16 |
