텍스트를 표현하는 다양한 스타일 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를 공부하는 것도 차츰 즐거워지고 있다.