텍스트를 표현하는 다양한 스타일 2 - 웹 폰트 사용하기

첫번째 단원을 학습하는데 시간이 너무 많이 걸려서 이 부분은 최대한 빠르게 진행해보려고 한다. 

앞에서 font-family 속성으로 글꼴을 지정할 때 글꼴이 아닌 경우를 대비해 다른 글꼴을 지정했다. 하지만 웹 폰트를 사용하면 사용자 시스템에 없는 글꼴도 사용할 수 있다.

---

 

 

 

 

1. 웹 폰트란?

사용자 시스템에 없는 글꼴을 다른 글꼴로 대체하는 것이 아니라 그대로 보여주려면 어떻게 해야 할까? 이전에는 포토샵 같은 프로그램에서 원하는 글꼴을 이용해 텍스트를 이미지로 저장한 뒤 웹 문서에 넣어 사용했다. 하지만 CSS3가 웹 폰트를 표준으로 채택한 덕분에 이런 번거러운 작업은 하지 않아도 된다.

웹 폰트를 사용하려면 웹 문서를 작성할 때 글꼴 정보를 함께 저장해야 한다. 즉, 기존에 가지고 있던 웹 폰트를 사용했다면 웹 문서를 서버에 올릴 때 웹 폰트 파일도 함께 업로드해야 한다. 웹 폰트를 사용한 사이트에 사용자가 접속하면 웹 문서를 내려받으면서 웹 폰트도 사용자 시스템으로 다운로드된다. 

 

 

2. 웹 폰트 업로드하고 사용하기

컴퓨터에서 사용하는 글꼴을 트루타입이고 파일 확장자는 *.tff이다. 하지만 트루타입 글꼴은 파일 크기가 커서 웹에서 사용하기에 적절하지 않다. 그래서 웹에 적합한 여러 글꼴이 등장했는데, 그중 EOT와 WOFF, 최근에는 WOFF2 파일도 많이 사용한다.

 

웹 폰트가 준비되었다면 @FONT-FACE 속성을 사용하여 다음과 같이 웹 폰트를 정의한다.

 

@font-face {
  font-family: <글꼴 이름>;
  src: <글꼴 파일>[<글꼴 파일>, <글꼴 파일>, .....];
  }

 

 

웹 폰트 소스 만드는 법

1. font-family 속성을 사용해 글꼴 이름을 만든다.
  - 되도록 글꼴 파일 이름과 같은 이름을 사용하는 것이 좋음
2. src 속성에서 사용할 글꼴 파일의 경로를 지정한다.
  - 글꼴 파일의 경로를 지정하기 전에 local( ) 문을 사용해서 사용자 시스템에 해당 글꼴이 있는지 먼저 확인
3. 해당 글꼴이 없다면 WOFF 포맷으로 된 글꼴을 내려받기
4. TTF 포맷은 다른 형식보다 용량이 크기에 대부분의 브라우저에서 지원하는 WOFF 포맷을 먼저 선언하고 TTF 포맷은 그 후에 선언한다. 

 

웹 폰트 사용하기

 

 

이렇게 직접 웹 폰트 파일을 준비해서 업로드한 후 사용할 수 있지만, 인터넷에서 무ㄹㅂ로 제공하는 에ㅜㅂ 폰트를 간단히 링크하여 사용할 수도 있다.

---

 

 

 

 

DO IT 실습 - 구글 폰트 사용하기

구글 폰트는 무료로 사용할 수 있는 여러 가지 웹 폰트를 제공하므로 웹 문서에 링크해서 쉡게 사용할 수 있다. 영문뿐 아니라 한글을 비롯해 다양한 언어의 글꼴을 제공한다.

 

1단계 : 구글 폰트 사이트에서 원하는 웹 폰트 찾기

 

글꼴 목록 중에서 원하는 폰트를 찾아서 클릭한다.

 

 

 

난 이 글꼴로 선택했다.

---

 

 

 

2단계 : 웹 폰트 스타일 복사하기

이 책을 저술한 2021년과는 사이트가 많이 달라진 것을 볼 수 있다. 책과는 다른 방법으로 찾아보았다.

 

get font를 클릭하면 위와 같은 창이 나타난다. 여기서 Get embed code를 클릭한다.

 

 

 

 

그런 다음 @import에서 두 개의 코드를 복사한다. 그리고 각각의 코드를 아래 단계에 붙여넣는다.

---

 

 

 

3단계 : 웹 문서에 스타일 소스 넣고 결과 확인하기

 

웹 문서를 열고 첫번째 코드는 <style> 태그 다음에, 글꼴 이름인 두번째 코드는 h1 안에 붙여 넣는다.

 

 

 

 

우여곡절 끝에 드디어 만들었다. 처음에는 클래스 이름으로 되어 있어서 h1으로 고쳐도 표시가 안되는 거였다. 알고 보니 이걸 스타일 태그 안쪽에 붙이는 거였다. 이제 글꼴을 바꾸는 것도 알게 되었다.

---

 

 

 

 

학습을 마치고 

이 두 단원을 1시간 안에 마치려고 했으나 그러진 못했다. 그래도 어려운 내용을 이해하고 적용해볼 수 있어서 정말 기뻤다. 다음은 텍스트 관련 스타일에 대해서 학습해보려고 한다. CSS를 공부하는 것도 차츰 즐거워지고 있다.