Web font

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


웹 폰트란 무엇일까?

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

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

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

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

Font-family

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

먼저 예제를 살펴보자.

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

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

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

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

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

1
2
3
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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@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는 앞서 설명했기 때문에 간단히 살펴보고 넘어가도록 하겠다.

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

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

1
2
3
4
@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 값을 지정하는 속성이다.

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

1
2
3
4
5
6
7
8
@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속성을 사용하면 브라우저에서 지원 가능한 파일만 다운로드 받을 수 있다.

1
2
3
4
5
6
7
8
@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은 글꼴체를 지정할 수 있다.
사용할 수 있는 속성값은 다음과 값다.

1
2
3
4
5
6
7
8
9
10
h1 {
font-style: normal;
}
h2 {
font-style: italic; /*이탤릭체*/
}
h3 {
font-style: oblique; /*이탤릭체와 크게 다른 점은 없다.*/
}

font-weight

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@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 처럼 단일 유니코드를 사용할 수 있다. 콤마를 이용해서 두 개 이상의 값도 넣을 수 있다.

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

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

범위코드

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

1
2
3
4
5
@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 의 값이 들어갈 수 있다.

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

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

사용법

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

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

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

서버에 직접 업로드

1
2
3
4
5
6
7
<!-- font.html -->
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>안녕하세요</h1>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
/* 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을 이용하는 경우

1
2
3
4
5
6
7
8
<!-- font.html -->
<head>
<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosanskr.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>안녕하세요</h1>
</body>
1
2
3
4
/* 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