font-family CSS 규칙을 사용하면 HTML 웹 문서의 글꼴을 자유롭게 정의할 수 있습니다. 외부 글꼴을 참조할 때는 url() 메서드로 @font-face를 선언하거나, Google Fonts 같은 서비스에서 제공하는 글꼴 CSS 파일을 삽입하는 방법을 사용할 수 있습니다.
개발자라면 HTML이 브라우저에서 처리될 때 기본으로 적용되는 글꼴 대신 다른 글꼴을 사용하고 싶은 순간이 반드시 찾아옵니다. 이 글에서는 모범 사례에 따라 HTML 문서의 글꼴을 변경하는 방법을 단계별로 소개합니다.
HTML에서 글꼴을 변경하는 3가지 방법
HTML로 웹 페이지의 글꼴을 변경하는 방법에는 크게 세 가지가 있습니다.
- 내장 글꼴 사용: font-family 규칙으로 시스템에 설치된 글꼴 지정하기
- @font-face 규칙 사용: 외부 글꼴 파일(.ttf 등)을 불러와 적용하기
- 외부 CSS 스타일 시트 사용: Google Fonts 등에서 제공하는 글꼴 CSS를 연결하기
각 방법을 하나씩 자세히 살펴보겠습니다.
1. 내장 font-family 속성 활용하기
첫 번째 방법은 인라인 스타일에서 font-family 속성을 사용하는 것입니다. 아래처럼 간단하게 작성할 수 있습니다.
<p style="font-family:wingdings;" id="wingdings">New York</p>
font-family 속성으로 텍스트 블록에 적용할 글꼴을 지정하면 됩니다. 대부분의 표준 글꼴은 별도 설정 없이 바로 사용할 수 있습니다.
첫 번째로 지정한 글꼴이 로드되지 못하는 경우를 대비해 백업 글꼴을 함께 지정하는 것이 좋습니다. 쉼표를 추가하고 새 글꼴 이름만 적어주면 되는데, 마지막에는 앞의 글꼴들을 모두 사용할 수 없는 예외 상황에 대비해 일반(generic) 폰트 계열까지 추가하는 것이 안전합니다.
<p style="font-family: Roboto, Lato, sans-serif" id="roboto-plus-backups">New York</p>
마지막에 지정한 일반 폰트 계열은 클라이언트 기기의 기본 sans-serif 글꼴로 자동 대체됩니다. 사용 가능한 일반 폰트 계열은 monospace, serif, sans-serif, cursive, fantasy 다섯 가지입니다. Times New Roman처럼 특정 글꼴을 직접 지정할 수도 있습니다.
2. @font-face 규칙으로 외부 글꼴 불러오기
@font-face 규칙을 사용하면 외부 소스의 글꼴을 웹 페이지로 가져올 수 있습니다. 이 방식을 사용하려면 외부 글꼴 파일에 접근할 수 있어야 하며, 글꼴 문서는 보통 ".ttf" 확장자를 가집니다.
@font-face로 글꼴을 변경하는 방법을 살펴보겠습니다. 필요한 CSS 스타일 규칙은 다음과 같습니다.
@font-face {
font-family: "Open Sans";
src: url(yoururl);
}@font-face 스타일 규칙으로 새 글꼴을 선언합니다. font-family 속성은 새 글꼴의 이름을 정의하고, src: url()은 CSS 문서에게 글꼴 파일의 위치를 알려줍니다. "yoururl" 자리에는 실제 글꼴 파일의 URL을 넣으면 됩니다.
선언만으로는 웹 페이지에 바로 적용되지 않습니다. 어떤 요소에 새 글꼴을 사용할지 CSS 스타일 시트에 지정해야 합니다.
h1, h2, h3 {
font-family: "Open Sans";
}위 코드는 h1, h2, h3 셀렉터를 통해 해당 요소들(HTML 제목 태그)에 "Open Sans" 글꼴을 적용합니다.
3. 외부 CSS로 Google Fonts 글꼴 적용하기
Google Fonts 같은 사이트에서는 CSS 스타일 시트를 통해 글꼴을 사이트에 손쉽게 삽입할 수 있습니다. 여기서는 Google Fonts의 'Bangers'와 'Yellowtail' 글꼴을 사용해 보겠습니다.
<p id="sans-serif" style="font-family: Bangers, sans-serif" >New York</p> <p id="cursive" style="font-family: Yellowtail, cursive" >New York</p>
위 코드를 IDE에서 실행하면 해당 글꼴이 로드되지 않아 일반 글꼴로 표시됩니다. 실제로 이 글꼴들을 사용하려면 몇 가지 간단한 단계만 거치면 됩니다.
- Google Fonts에 접속합니다.
- 사이트를 둘러보며 다양한 글꼴을 탐색해 보세요. 상단 입력창에 원하는 텍스트를 입력해 샘플 미리보기를 커스터마이즈할 수 있습니다.
- 'Yellowtail'을 검색하고 클릭합니다. 글꼴 상세 정보 화면에서 "+ Select This Style" 버튼을 찾아 클릭합니다.
- 선택한 글꼴 정보가 담긴 사이드바가 열립니다. 이 상태에서 화면 상단의 Browse Fonts 링크를 눌러 'Bangers'를 검색하고 동일한 과정을 반복합니다.
- 사이드바에서 'Embed' 탭을 클릭합니다.
- <link> 옵션이 선택된 상태에서 해당 코드를 복사해 HTML의 <head> 부분에 붙여넣습니다.
- 각 글꼴의 CSS 사용법 안내와 권장 백업 글꼴 정보를 참고합니다.
- 완료! 이제 문서에서 두 글꼴을 자유롭게 사용할 수 있습니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Yellowtail&display=swap" rel="stylesheet"> </head> <body> <p id="courier">New York</p> <p id="roboto">New York</p> <p id="raleway" style="font-family: Raleway, sans-serif">New York</p> <p id="serif" style="font-family: Courier New">New York</p> <p id="monospace" style="font-family: Roboto Monospace, monospace">New York</p> <p id="sans-serif" style="font-family: Bangers, Anton, sans-serif" >New York</p> <p id="cursive" style="font-family: Yellowtail, cursive" >New York</p> <p id="roboto-condensed" style="font-family: Roboto Condensed, sans-serif">New York</p> </body> </html>
위 데모는 내장 글꼴과 서드파티 외부 글꼴을 함께 사용하는 전체 예시입니다. 다른 글꼴도 직접 가져와 적용해 보면서 감각을 익혀보세요!
마무리
HTML의 글꼴은 font-family 속성이나 외부 CSS 스타일 시트를 통해 변경할 수 있으며, @font-face 규칙을 사용하면 커스텀 글꼴을 사이트의 CSS에 직접 삽입할 수 있습니다.
HTML 코딩을 더 깊이 배우고 싶다면 초보자를 위한 HTML 학습 가이드를 참고해 보세요. 효율적인 학습 팁과 추천 온라인 강좌 정보를 함께 확인할 수 있습니다.