Web font(웹 폰트에 대해서)

jaemin·2020년 9월 2일

목록 보기

2/5

Web font

오늘은 web font에 대해 알아보겠습니다.
그동안 아무 생각없이 구글 폰트에서 복사 붙여넣기 하던 폰트였는데 문득 font-family로 적용하는 방법과 @font-face로 적용하는 것 두 가지가 어떤 차이가 있는지 궁금해져 작성합니다.

웹 폰트란 무엇일까?

방문자의 로컬 컴퓨터에 폰트 설치 여부와 상관 없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트이다.

예를 들어, 웹 폰트를 사용하지 않았을 경우 나눔고딕 폰트가 설치되지 않은 pc에서는 기본 폰트인 돋움 글꼴이 노출되고, 나눔고딕 폰트가 설치된 pc에서는 나눔고딕 폰트가 노출된다.
그러나, 웹 폰트를 사용할 경우 방문자의 pc에 나눔고딕 폰트가 있든 없든 나눔고딕 폰트가 노출된다.

웹 폰트는 font-family속성을 사용하지만, @font-face라는 CSS 명령어를 사용해서 웹 브라우저에게 해당 서체를 다운로드할 것을 알리면서 사용할 수 있다.

최근의 모든 브라우저들은 웹 폰트를 지원하고 있다.

Font-family

font-family는 글꼴을 정하는 속성일 뿐, 웹 폰트가 아니다.
다시 말하자면, 웹 폰트가 font-family 속성을 사용하는 것이지 font-family가 웹 폰트인 것은 아니다.

먼저 예제를 살펴보자.

body { font-family: Verdana, Arial, sans-serif; }

위 예제를 해석하면 이렇게 된다.

Verdana 글꼴이 있으면 Verdana를, 없으면 Arial을, 그것도 없다면 san-serif 계열 중 하나를 사용해주세요.

즉, 방문자의 pc에 글꼴이 없는 경우를 대비해서 좌측에서부터 순서대로 예비 글꼴을 지정할 수 있다.

만약, 글꼴 이름이 'Times New Roman'처럼 하나 이상의 단어로 구성되어 있다면 작은따옴표로 묶어줘야 한다.

body {
  font-family: 'Times New Roman', Times, Arial, Helvetica, sans-serif;
}

@font-face

@font-face를 사용하여 웹페이지 제작자가 원하는 폰트를 사용할 수 있게함으로써, 컴퓨터에 설치된 폰트만을 사용해야했던 제약이 없어지게 되었다.

@font-face의 사용법

@font-face가 사용할 수 있는 속성은 다음과 같다.

font-family
src
font-style
font-weight
unicode-range

어떻게 작성하는지는 다음 예제를 참고하자.

@font-face {
  font-family: NanumSquareWeb;
  src: local(NanumSquareR),
       local(NanumSquare),
       url(NanumSquareR.eot?#iefix) format('embedded-opentype'),
       url(NanumSquareR.woff) format('woff'),
       url(NanumSquareR.ttf) format('truetype');
  font-style: normal;
  font-weight: normal;
  unicode-range: U+0-10FFFF;
}
h1 {
  font-family: NanumSquareWeb, sans-serif;
}

그러면 각 속성이 어떤 역할을 하는지 알아보자.

font-family

font-family는 앞서 설명했기 때문에 간단히 살펴보고 넘어가도록 하겠다.

@font-face {
  font-family: NanumSquareWeb;
  src: url(NanumSquareR.woff) format('woff')
}

여기서 font-family 속성을 이용해 NanumSquareWeb 글꼴을 사용하겠다고 선언하였다.
그런데, font-family에서 선언한 웹 폰트 패밀리명과 사용할 웹 폰트 명이 반드시 같아야 하는 것은 아니다.

@font-face {
  font-family: 'Jaime blog';
  src: url(NanumSquareR.woff) format('woff')
}

위의 예제처럼 웹 폰트 패밀리명을 'Jaime blog'으로 정하고 나눔스퀘어 폰트를 사용해도 상관없다. 하지만 유지 보수가 까다로우니 통일해주는 편이 바람직하다.

여기서 알 수 있는 것은, @font-face 없이 font-family로 글꼴을 정해줄 때는 반드시 글꼴 이름이 와야했지만 font-family가 @font-face의 속성으로 사용될 때는 글꼴의 명칭을 나타내는 역할이다.

src

src는 사용자 컴퓨터에 설치된 폰트명을 local("Font Name")형식으로 지정하거나, 원격 폰트(remote font)파일의 위치를 나타내는 url 값을 지정하는 속성이다.

잘 이해가 가지 않으니 예제를 살펴보자.

@font-face {
  font-family: NanumSquareWeb;
  src: local(NanumSquareR), /* 첫번째 */
       local(NanumSquare), /* 두번째 */
       url(NanumSquareR.eot), /* 세번째 */
       url(NanumSquareR.woff), /* 네번째 */
       url(NanumSquareR.ttf); /* 다섯번째 */
}

src는 local()과 url() 두 가지 속성을 사용한다.
위의 예제를 해석해보면 먼저 local(NanumSquareR)를 읽고 방문자의 컴퓨터에 이 폰트가 설치됐는지 찾는다.
있으면 사용하고 없으면 다음으로 넘어가 local(NanumSquare)를 찾는다.
이것도 없다면 url(NanumSquareR.eot) → url(NanumSquareR.woff) → url(NanumSquareR.ttf) 순으로 폰트를 찾는다.

만약, 나눔스퀘어 폰트가 설치되지 않은 pc 사용자가 크롬 브라우저를 통해 웹 사이트에 접속하면 local(NanumSquareR) → local(NanumSquare) → url(NanumSquareR.eot) → url(NanumSquareR.woff) 순으로 이동하여 NanumSquareR.woff 파일이 적용 된다.

왜 url(NanumSquareR.eot) 파일이 적용되지 않냐면, 크롬 브라우저에서는 .eot 파일을 지원해주지 않는다.
즉, 불필요한 다운로드가 일어나게 된다.

이러한 불필요한 다운로드를 막기 위해 format속성을 사용한다. format속성을 사용하면 브라우저에서 지원 가능한 파일만 다운로드 받을 수 있다.

@font-face {
  font-family: NanumSquareWeb;
  src: local(NanumSquareR), /* 첫번째 */
       local(NanumSquare), /* 두번째 */
       url(NanumSquareR.eot) format('embedded-opentype'),
       url(NanumSquareR.woff) format('woff'), /* 세번째 */
       url(NanumSquareR.ttf) format('truetype'); /* 네번째 */
}

format속성을 추가하게 되면 지원 불가능한 .eot 파일은 건너 뛰고 local(NanumSquareR) → local(NanumSquare) → url(NanumSquareR.woff) 순으로 이동하여 NanumSquareR.woff 파일이 적용된다.

주의할점

IE 8 이하 브라우저에서는 local() 속성을 인식하지 못한다.
사용자 로컬에 폰트가 잘못 설치된 경우, 원하는 화면이 노출되지 않을 수 있다.

이와 같은 이유로 local() 속성은 대부분 사용하지 않는다.

font-style

font style은 글꼴체를 지정할 수 있다.
사용할 수 있는 속성값은 다음과 값다.

h1 {
  font-style: normal;
}
h2 {
  font-style: italic; /*이탤릭체*/
}
h3 {
  font-style: oblique; /*이탤릭체와 크게 다른 점은 없다.*/
}

font-weight

폰트 이름을 하나로 하고 여러 개의 스타일을 표현하고자 할 때 사용한다.

@font-face {
  font-family: NanumSquareWeb;
  src: url(NanumSquareL.woff) format('woff');
  font-weight: 300;
}
@font-face {
  font-family: NanumSquareWeb;
  src: url(NanumSquareR.woff) format('woff');
  font-weight: 400;
}
@font-face {
  font-family: NanumSquareWeb;
  src: url(NanumSquareB.woff) format('woff');
  font-weight: 700;
}
@font-face {
  font-family: NanumSquareWeb;
  src: url(NanumSquareEB.woff) format('woff');
  font-weight: 800;
}

위의 예제를 보면 웹 폰트 패밀리명은 동일하지만 font-weight을 이용하여 사용할 웹 폰트를 다르게 선언하고 있다.
font-weight가 300일 경우에는 NanumSquareL.woff,
font-weight가 400일 경우에는 NanumSquareR.woff,
font-weight가 700일 경우에는 NanumSquareB.woff,
font-weight가 800일 경우에는 NanumSquareEB.woff 가 적용된다.

그렇다면, font-weight이 200일때와 600일때의 선언은 없는데 200과 600일 경우 어떤 웹 폰트가 적용될까?

font-weight:200 은 가능한 가장 작은 Font-weight 중 가까운 font-weight: 300이 적용되어 NanumSquareL 폰트가 적용되고, font-weight: 600 은 가능한 큰 font-weight 중 가까운 font-weight: 700이 적용되어 NanumSquareB가 적용된다.

unicode-range

사용할 유니코드의 범위를 정한다. 유니코드 범위 내 사용하는 문자가 없으면 웹폰트를 다운로드 하지 않는다.

단일코드

U+AC01 처럼 단일 유니코드를 사용할 수 있다. 콤마를 이용해서 두 개 이상의 값도 넣을 수 있다.

@font-face {
  font-family: NanumSquareWeb;
  src: url(NanumSquareL.woff) format('woff');
  unicode-range: U+AC01, U+AC08;
}

U+AC01은 '각'에 해당하고 U+AC08은 '갈'에 해당하므로 '각' 과 '갈'의 폰트가 변경된다.

범위코드

-를 이용하여 유니코드 범위를 설정하여 사용할 수 있다.

@font-face {
  font-family: NanumSquareWeb;
  src: url(NanumSquareL.woff) format('woff');
  unicode-range: U+AC07-AC0A, U+AC00;
}

U+AC07-AC0A는 ‘갇갈갉갊’에 해당하고 U+AC00은 ‘가’에 해당하므로 ‘갇갈갉갊’과 ‘가’ 부분이 변경되었다.

와일드카드

?를 이용하여 유니코드 범위를 설정할 수 있다. ?는 임의의 16진수 중 하나로 0 ~ F 의 값이 들어갈 수 있다.

@font-face {
  font-family: NanumSquareWeb;
  src: url(NanumSquareL.woff) format('woff');
  unicode-range: U+003?;
}

U+0030-003F에 해당한다. 그러므로 범위에 해당하는 ‘0123456789:;<=>?’ 부분이 변경되었다.

사용법

unicode-range는 네이버 사전처럼 다국어를 지원해주는 사이트에서 웹 폰트를 적용할 때 사용하면 좋다.

자세한 내용은 웹 폰트 사용하기에서 살펴볼 수 있다.

웹폰트 파일을 관리하는 방법

서버에 직접 업로드

<!-- font.html -->
<head>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <h1>안녕하세요</h1>
</body>

/* style.css */
@font-face {
 font-family: NanumSquareWeb;
 src: url(../webfont/NanumSquareR.eot);
 src: url(../webfont/NanumSquareR.eot?#iefix) format('embedded-opentype'),
 url(../webfont/NanumSquareR.woff2) format('woff2'),
 url(../webfont/NanumSquareR.woff) format('woff'),
 url(../webfont/NanumSquareR.ttf) format('truetype');
}
h1 {
 font-family: NanumSquareWeb, sans-serif;
}

서버에 직접 업로드하는 경우는 css에 @font-face를 직접 선언해 주어야 한다. 폰트의 종류가 많을수록 @font-face를 많이 선언해야 해서 복잡하지만 기준브라우저에 따라 코드를 추가, 삭제할 수 있다.
그리고 다른 CDN을 이용하는 것보다 속도가 빠르고 안전하다.

구글 CDN을 이용하는 경우

<!-- font.html -->
<head>
 <link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosanskr.css">
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <h1>안녕하세요</h1>
</body>

/* style.css */
h1 {
 font-family: 'Noto Sans KR', sans-serif;
}

구글 CDN을 이용하면 별도의 @font-face를 정의하지 않아도 되기 때문에 편리하지만 서버에 직접 업로드하는 것보다 속도가 느리고 구글 CDN 서버가 제대로 동작하지 않을 때는 웹 폰트를 제공받지 못할 수 있다. 구글 CDN의 경우 @font-face에 WOFF와 WOFF2만 지원하므로 IE 6~8, IE 호환성 보기 모드에서는 웹폰트를 사용할 수 없다.

그래서 서버가 있으면 직접 서버에 업로드하여 사용하는 것이 좋다.

로컬 서버 VS 구글 웹 폰트 로드 차이

로컬서버에서 파일을 로드하는 게 더 빠르다. 하지만 티스토리와 같이 폰트를 서버에서 올릴 수 없을 경우 구글 웹 폰트를 로드해서 사용할 수 있다.

웹 폰트를 사용하지 않는 이유

웹 폰트를 사용하지 않는 이유는 두 가지가 있다. 첫 번째는 IE 브라우저에서 폰트 로드가 완료되면 깜빡거리는 현상인 FOUT 때문이고 두 번째는 웹 폰트 용량에 따른 성능 문제이다.

이에 대한 자세한 사항은 다음 글에 살펴보도록 하겠다.

References

jaemin

프론트엔드 개발자가 되기 위해 공부 중입니다.

이전 포스트

CSS Attribute Selector(css 속성 선택자)

다음 포스트