우리는 앞서 폰트와 관련된 설정을 할 때, 유저의 PC에 있는 폰트를 고려하여 폰트를 지정했습니다. 하지만 항상 유저의 환경을 고려할 수도 없는 노릇이고 우리가 기획하고 디자인한 폰트로 출력하기 위해서는 폰트를 만드는 입장에서 제공할 필요성이 있습니다.
이를 위해서 스타일 선언을 통해 우리가 직접 웹 문서에 사용할 폰트를 업로드하거나 지정된 위치에서 불러오는 동작을 선언할 수 있습니다. 방법에 따라 몇 가지 선언 방식이 있는데, 하나씩 차근차근 살펴보도록 하겠습니다.
○ 폰트 파일 경로 지정 후 사용하기
직접 폰트 파일의 경로를 지정하여 사용하게 된다면, 다음과 같이 @font-face 속성을 적용하여 미리 선언하고 사용할 수 있습니다. 여기서는 빙그레에서 제공하는 무료 폰트인 '빙그레 싸만코체 Regular'를 TTF로 다운로드하여 실습해 보겠습니다.
참고로 TTF(트루타입)의 용량이 크기 때문에 EOT(embedded open type)또는 WOFF(web open font format)을 사용하기도 합니다. 예제에서는 이러한 타입일 경우에 대해서도 함께 설정 값을 작성해 두겠습니다.
우선 @font-face를 통해서 특정 폰트를 선언합니다.
* font-family에서 폰트의 명칭을 선언합니다.
* src를 통해서 해당 폰트의 경로를 탐색합니다. 이 때, 로컬 / 파일 유형 별 경로를 우선순위로 정할 수 있습니다. 일단 local()을 통해서 사용자의 PC에 설치된 해당 폰트가 있는지 확인하고, 이후에 url과 format을 지정하여 해당 파일을 불러올 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@font-face {
font-family: 'BinggraeSamanco';
src: local('BiggraeSamanco'),
url('fonts/BinggraeSamanco.woff') format('woff'),
url('fonts/BinggraeSamanco.ttf') format('truetype');
}
.wfont {
font-family: 'BinggraeSamanco', sans-serif;
}
p {
font-size: 30px;
}
* {
background-color: antiquewhite;
}
</style>
</head>
<body>
<p>기본 폰트를 사용합니다.</p>
<p class="wfont">빙그레 싸만코를 사용합니다.</p>
</body>
</html>
위의 @font-face 속성을 잘 살펴보세요. 우선 font-familty 속성 값에 불러올 폰트의 사용 명칭을 선언합니다. 당연한 이야기겠지만, 폰트 파일명과 동일하게 사용해 주는 것이 좋습니다. 그리고 해당 폰트의 경로를 지정하는 src 속성에서 local을 먼저 불러옵니다. 사용자의 PC에 해당 폰트가 설치되어 있다면 기본적으로 불러오는 것이죠. 그리고 동일한 폰트라도 woff 또는 true type 파일을 서버에서 순서대로 불러오도록 선언해 둡니다. 그리고 클래스 wfont를 적용한 요소에 해당 폰트를 불러오도록 선언해 다음과 같이 적용했습니다.
사실 이 방법 이외에도 구글에서 제공하는 폰트를 적용하여 간단하게 폰트를 사용할 수도 있습니다. 구글에서 제공하는 <style> 태그 적용 코드와 font-family 적용 라인만 붙여 넣으면 됩니다. 이 방법도 한번 살펴보겠습니다.
일단 google fonts 페이지로 들어가, Language를 한글로 바꾸고 적당한 폰트를 선택합니다. 저는 Black Han Sans를 골랐습니다.
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
위와 같이 css에서 사용할 수 있는 스타일 가이드 명칭과 폰트 패밀리 명칭이 주어집니다. 이 코드들을 그대로 복사해 사용하면 됩니다. 헤드 태그에 위의 부분을 복사해 주고, 우리는 예제에서 <h1> 태그에 해당 폰트를 적용한다고 가정하고 사용해 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@font-face {
font-family: 'BinggraeSamanco';
src: local('BiggraeSamanco'),
url('fonts/BinggraeSamanco.woff') format('woff'),
url('fonts/BinggraeSamanco.ttf') format('truetype');
}
.wfont {
font-family: 'BinggraeSamanco', sans-serif;
}
p {
font-size: 30px;
}
* {
background-color: antiquewhite;
}
h1 {
font-family: 'Black Han Sans', sans-serif;
font-size: 50px;
}
</style>
<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=Black+Han+Sans&display=swap" rel="stylesheet">
</head>
<body>
<p>기본 폰트를 사용합니다.</p>
<p class="wfont">빙그레 싸만코를 사용합니다.</p>
<h1>Black Han Sans를 사용합니다.</h1>
</body>
</html>
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 2. 텍스트 스타일(4) - 텍스트 정렬 1 (0) | 2023.03.29 |
|---|---|
| [CSS] 2. 텍스트 스타일(3) - 텍스트 컬러 (0) | 2023.03.27 |
| [CSS] 2. 텍스트 스타일(1) - 폰트 스타일 속성 (0) | 2023.03.25 |
| [CSS] 1. CSS의 기본 개념(4) - Cascading (0) | 2023.03.23 |
| [CSS] 1. CSS의 기본 개념(3) - 기본 선택자 (0) | 2023.03.22 |
