웹사이트에 웹폰트와 이모지 적용하기

 

 

웹사이트에서 타이포그래피(폰트)는 웹사이트의 분위기를 잘 표현해주는 요소 중 하나이다.
웹사이트를 보면 종종 기본 폰트로는 그 분위기를 표현하기 어려워 마크업 언어가 아닌 이미지로 노출하는 경우가 많은데, 이미지로 텍스트를 표현할 경우에는 여러 문제가 발생한다.

- 번역기 및 텍스트 리더기의 사용이 불가하다.
- 화면 비율이나 반응형에 맞게 유연하게 표현할 수 없다.
- 다양한 디바이스에 맞춰 고해상도의 이미지를 준비해야 한다.
- 텍스트 수정이 번거롭고, 수정용 파일을 별도로 챙겨야 한다.

이러한 문제로 이미지로 텍스트를 표현하기보다는 웹폰트의 사용이 필요하다.
(여러모로 웹표준에 맞춰 웹페이지를 구현하는 것이 바람직하다.)

 

물론 웹폰트 사용 시에도 용량 문제가(경량화가 잘 된 한글 폰트도 영문에 비해 용량이 높음) 있긴 하지만 장점이 더 많다.

- 디바이스 및 해상도 변화에 유동적이다.
- 검색에 최적화된 상태로 접근성이 향상된다.
- 유지보수 및 관리에 용이하다.

 

그러므로.. 웹사이트의 목적에 맞게 웹폰트를 적절히 사용하면 좋겠다.

아래 이미지에 해당하는 페이지는 많은 용량을 필요로 하지 않아 이모지와 웹폰트를 적용해보았다. 

 

 

 

비상업적 용도의 개인 작업물

 

 

 

이모지 적용 방법

 

이모지는 검색(emoji css)을 통해 쉽게 얻을 수 있는데, 이모지를 제공하는 사이트에서는 <link>코드와 해당하는 이모티콘 적용 코드를 제공하므로 웹폰트를 적용하는 방법과 동일하게 적용하면 된다.

웹폰트의 적용 과정과 동일하므로 이모지 적용 방법에 대한 세부 과정은 생략하겠다. (또 다른 이모지 적용 방법으로는 W3Schools를 참고)

 

 

그럼 이제 웹폰트를 적용하는 방법에 대해 알아보자. 

폰트의 경우 구글 폰트를 통해 사용하는 방법을 소개하겠다. (웹폰트 형식은 여기를 참고)

 

 

 

웹폰트 적용 방법

 

1. Google Fonts 접속

 

 

 

 

 

2. 상단의 메뉴에서 폰트 카테고리 및 언어(Language)를 선택한다.

(Sentence란에 작성하려는 텍스트를 입력하면 적용본(Custom)을 미리 볼 수 있다.)

 

 

 

 

 

 

3. 원하는 폰트를 클릭하여 (세부 정보 확인) 원하는 굵기 선택 후, 상단의 아이콘 클릭한다.

 

 

 

 

 

 

4. Embed 클릭 후, <link> 또는 @import 선택하여 복사한다. (@import는 CSS 파일에 <link>는 HTML 파일에 적용하는 것으로, 택일하여 사용한다.)

 

 

 

 

 

 

5. 복사한 <link>와 적용할 CSS코드를 HTML파일에 붙여 넣으면 끝이다. 간단하다.

 

 

 

 

적용 및 출력화면 :

 

 

 

---