[알쓸신잡] Web Font

Web › Enlighten
css, font, html

Web Font?

웹폰트는 폰트 파일을 서버에 올리고 이를 브라우저에서 다운로드해서 적용하는 방식을 말해요.

기존 나의 컴퓨터에 설치된 폰트만 보이던 방식과 달리

해당 폰트가 설치되어 있지 않아도 볼 수 있다는 큰 장점이 있어요.

그럼 폰트에 대한 기본 지식만 좀 짚고 넘어가도록 해요.

Font types

Serif

가로 세로 획의 시작 지점과 끝 지점 사이에 굵기가 변화하거나 군더더기 장식이 있는 글꼴을 말해요.

명조 폰트(바탕체)들이 대표적이에요.

나눔명조, 서울한강체 … 등이 있어요.

Serif example

Sans Serif

획의 시작부터 끝까지 굵기가 변하지 않는 글꼴을 말해요.

고딕 폰트(돋움체)들이 대표적이에요.

나눔고딕, Apple SD 고딕 … 등이 있어요.

Sans Serif example

Serif vs Sans Serif

Serif vs Sans Serif

Monospace

각 글자의 너비가 동일한 글꼴을 말해요. 컴퓨터시스템에 많이 쓰입니다.

개발용 폰트들이 대표적이에요.

Courier, Hack, D2Coding … 등이 있어요.

Monospace vs Proportion 비교 1

Monospace vs Proportion

Monospace vs Proportion 비교 2

Monospace vs Proportion
Fig. 4: Monospace(아래) 와 Proportion(위) 비교

위에 이녀석들만 있는게 아니라 훠얼씬 다양하지만 대표적인 녀석만 적었어요.

How to use

기본

* {
   font-mamily: Menlo, "Meslo LG", monospace
}

그냥 이렇게 font-family 에 폰트 이름을 선언해 주면 되요.

CDN

CDN(Contents Delivery Network)을 이용하여 폰트를 보다 빠르게 불러와 적용할 수 있어요.

무료 서비스로는 대표적으로 구글 폰트가 있어요.

  Google Fonts

한글 폰트는 눈누 도 있어요.

  눈누

참고로 CDN 방식이 젤루 편함

그런데 갓글에 모든 폰트가 있으면 좋겠지만 그렇지가 않죠.

그래서 직접 폰트 파일을 import 를 해야 할 때가 옵니다.

폰트 파일

위의 기본 부분 보면 폰트 여러개를 굳이 묶어서 차례대로 선언했어요.

Why?

  1. 지원하는 언어가 달라요.

    • 영어만 지원하는 폰트가 있고, 한글만 지원하는 폰트 등 각 언어, 문자별 지원 범위가 달라요.

  2. 시스템에 따라 지원하는 타입이 다르다.

    • 운영체제별, 브라우저별 지원 타입이 다양합니다. 이 부분은 바로 자세히 알아봅시다요.



이러한 이유로 font 를 여러개 순서대로 선언해서 지원하지 않으면 다음 선언, 다음 선언 …

마지막에는 보통 시스템 폰트들을 선언해요. 못 불러올 수 가 없습니다. 공통이니까요. 🤩🤙🏻

자 그럼 이제 다양한 font format 에 대해 알아봅시다요.

Font Format

  1. TTF (True Type Font)

    보통 제일 많이 보셨을 포맷이에요. 대충 뭐 다운받으면 다 ttf 에요.

    Apple 이랑 MS가 함께 만든 포맷이에요.

    특이한 점은 bold, italic 을 다른 파일로 취급합니다.

    문서작업에 주로 쓰여요.

  2. EOT (Embedded Open Type)

    MS가 만든 포맷이에요.

    ie8 이하 버전은 얘만 인식 되요. ie9 부터는 WOFF를 지원해요.

    아직도 ie8 이하 많을라나 ...🤔

    compatibility

    IE 6+ …

  3. WOFF (Web Open Font Format)

    Mozila가 이름 그대로 웹을 위해 만든 포맷이에요.

    빠릅니다.

    compatibility

    IE 9+, Chrome 5+, Fire fox 3.6+, Safari 5.1+, Opera 11.1+

  4. WOFF 2.0 (Web Open Font Format 2.0)

    WOFF 폰트를 더 압축해서 다이어트 시킨 녀석입니다. 다이어트라니 마냥 좋을거 같지만

    나름 최신이라 아직 브라우저 별 대응이 미흡합니다.

    compatibility

    Chrome 36.0+, Fire fox 35.0*, Opera 26.0+



그럼 이 아이들을 어떻게 잘 사용할수 있을까요?

바로 최적의 적용 순서를 알아봅시다.

Assign Order

간단합니다.

바로 빠르면서 지원이 많은 것 순으로 적용하면 됩니다.

  1. WOFF 2.0 을 적용해요.

  2. 지원 하지 않으면 WOFF 를 적용합니다.
    여기서 아마 대부분 지원 될거에요.

  3. 근데도 안된다? TTF를 적용해요.

  4. 또 안된다? 진짜 마지막으로 EOT 를 적용합니다.

WOFF 2.0 -> WOFF -> TTF -> EOT

적용법은 아래 처럼 하면 됩니다.
예시는 한글누리 폰트를 사용해요.

@font-face {
   font-family: 'HangeulNuri';
   src: local('HangeulNuri'),
      url('/fonts/HangeulNuri.woff2') format('woff2'),
      url('/fonts/HangeulNuri.woff') format('woff'),
      url('/fonts/HangeulNuri.ttf') format('truetype'),
      url('/fonts/HangeulNuri.eot') format('embedded-opentype');
}

따단~
Font file 웹폰트로 적용

주의사항 💡

  1. 폰트 마구마구 쓰면 웹 사이트가 무거워져 많이 힘들어 하니 신중하게 사용해야 합니다.

  2. 저작권 잘 알아봐야 합니다. 어느 범위까지 허용되는지

  3. 또 뭐가 있을텐데…

또 정보들이 있으면 추가 해야겠네요.

오늘은 여기까지