2011. 4. 11. 12:18ㆍIT/Tistory Tips
블로그에 유용한 태그 3 - 티스토리 블로그에 웹폰트 적용하기 게시물에서 웹폰트 적용에 대해 이야기했다. 그때 이야기한 코드는 다음과 같다.
@font-face {
font-family: "글꼴 이름";
src: url('./images/글꼴파일.eot');
src: local('컴퓨터의 글꼴 이름'), url('./images/글꼴파일.ttf') format('truetype');}
위 코드를 CSS에 추가하거나 style 태그를 사용해서 HTML 문서에 삽입하면 해당 웹폰트를 사용할 수 있다. 먼저 src: url('./images/글꼴파일.eot'); 부분이 IE8 이하의 웹브라우저에 적용되고 src: local('컴퓨터의 글꼴 이름'), url('./images/글꼴파일.ttf') format('truetype'); 부분이 Opera, Safari, Chrome, Firefox에 적용된다. (Firefox는 같은 도메인의 웹폰트만을 인식하므로 티스토리 블로그에 웹폰트를 사용할 땐 일반적으로 Firefox엔 적용되지 않는다.<참고 1>, <참고 2>)
여기서 짚고 넘어가야 할 몇 가지 문제가 있다. 먼저 최신 브라우저의 WOFF 형식 지원이다. WOFF는 웹페이지에서 사용하기 위한 글꼴 형식이다. 일반 트루타입(ttf) 글꼴을 gzip으로 압축한 형태으므로 eot 처럼 크기가 작아서 웹폰트로 사용했을 때 ttf 보다 로딩 시간이 훨씬 짧다. IE9에서 EOT(Embedded Opentype)과 함께 WOFF(Web Open Font Format)을 지원한다. FF 3.6, Chrome 6, Safari 6, Opera 11.1 이상에서도 WOFF를 지원하므로 최신 브라우저에 두루 적용할 수 있는 형식이다.
다음은 IE9의 호환성 보기 모드에서의 웹폰트다. 이 부분은 나중에 다시 이야기하겠다.
마지막은 로컬 글꼴 지정 문제다. 매킨토시에서 구동하는 Safari 브라우저는 보통 글꼴 이름이라고 이야기하는 Full name 대신 PostScript name을 글꼴 이름으로 사용한다. 따라서 매킨토시에서 구동하는 Safari 브라우저에선 Full name을 local에 지정했을 때 해당 글꼴을 불러올 수 없다. <참고 3>
또 글꼴 이름이 중복됐을 때도 문제가 생긴다. src:local('컴퓨터의 글꼴 이름')을 지정하면 사용자의 컴퓨터에 글쓴이가 의도한 글꼴이 설치되어 있을 때 웹폰트 대신 사용한다. 그런데 여기서 같은 이름의 서로 다른 글꼴이 설치되어 있을 때의 상황을 살펴보자. 만약 글쓴이는 '왕바보'라는 이름의 '왕바보' 체를 로컬에서 불러와서 사용하라고 지시했는데 사용자의 컴퓨터엔 '왕바보'라는 이름의 '정말 바보' 체가 설치되어 있다고 가정해보자. 이때 웹폰트의 local 선언은 글꼴 이름만으로 글꼴을 판단하므로 글쓴이가 의도한 '왕바보'가 아닌 '정말 바보' 체로 내용이 표시된다. (개인적인 생각으로 이런 상황은 일반적으로 일어날 수 있는 상황은 아니며 가능성의 문제다.)
그럼 해결해야 할 문제 역시 세 가지다. 먼저 WOFF. 앞서 말한 것처럼 WOFF는 모든 최신 브라우저에서 지원하는 형식이며 ttf보다 크기가 작으므로 가장 먼저 적용해야 할 형식이다. 두 번째는 IE9 호환성 보기에서의 웹폰트. 역시 뒤에서 이야기하겠다. 마지막 로컬 글꼴 지정 문제. 사실 로컬 글꼴 지정은 그리 큰 문제는 아니다. 우리나라의 매킨토시 사용자는 외국과 비교하면 그 수가 굉장히 적다. 적은 수의 맥 사용자를 고려할 것인가 말 것인가? 다음은 서로 다른 글꼴이 같은 이름을 쓸 가능성. 역시 거의 없다. 그렇지만, 적은 수의 맥 사용자에 대한 배려와 거의 가능성이 없는 같은 이름의 다른 글꼴 문제 역시 해결하려면 local을 사용하지 않거나 local에 글꼴에서 절대 사용할 것 같지 않은 문자를 추가하면 된다.
위의 세 가지 사항을 염두에 두고 웹폰트 적용 코드를 수정해보자. 웹폰트는 eot, woff, ttf, svg 형식을 모두 적용하도록 한다. 글꼴 형식 변환은 Font Squirrel @font-face Generator에서 해결할 수 있다. 일단 위 링크를 따라 Font Squirrel @font-face Generator로 이동한다. (* 이전에 소개한 EOTFAST와 sfnt2woff를 사용하면 웹서비스를 사용하지 않고 글꼴 형식을 바꿀 수 있다. java를 이용해서 ttf를 svg로 바꾸는 batik SVG Font Converter도 있는데 변환된 파일이 제대로 적용되지 않는 것 같다. FontForge를 사용할 수도 있다.)
[Add fonts]를 클릭해서 변환할 글꼴을 올리고 [Expert...]를 클릭한다. 그다음 빨간 네모 칸을 선택한다. Font format은 그림처럼 ttf, woff, svg, eot를 선택하고 Subsetting은 반드시 No Subsetting을 선택한다. 만약 한글 글꼴을 변환할 때 Basic Subsetting이 선택되어 있으면 한글은 모두 삭제되고 로마자 알파벳만 남는다. CSS Formats는 아래에서 설명할 것이니 아무것이나 선택해도 된다. 마지막으로 Agreement를 선택하고 [Download Your Kit]을 클릭해서 변환된 글꼴을 내려받는다. 다른 설정은 기본값으로 놔둔다.
Font Squirrel에서 내려받은 파일의 압축을 풀면 변환된 글꼴 파일과 CSS, HTML 등의 파일을 확인할 수 있다. 블로그에 유용한 태그 3 - 티스토리 블로그에 웹폰트 적용하기 게시물을 참고 해서 변환된 ttf, eot, svg, woff 파일을 블로그나 웹사이트에 올린다.
이제 웹폰트 적용을 위해 CSS에 @font-face를 추가하자. 아래에 소개할 세 가지 CSS는 Font Squirrel의 CSS Format에서 선택할 수 있는 세 가지 옵션이다.
<Fontspring @Font-Face Syntax>
개인적으로 가장 선호하는 방식이며 거의 모든 브라우저에 적용된다. 현재 웹폰트 적용에 관한 CSS 중 가장 널리 사용되는 방식 중 하나다. <참고 4>
@font-face {
font-family: '글꼴 이름';
src: url('./images/글꼴 파일.eot'); /* IE9 호환성 보기 */
src: url('./images/글꼴 파일.eot?iefix') format('eot'), /* IE6-IE8 */
url('./images/글꼴 파일') format('woff'), /* Modern Browsers */
url('./images/글꼴 파일') format('truetype'), /* Safari, Android, iOS */
url('./images/글꼴 파일.svg#svgFontName') format('svg'); /* Legacy iOS */ }
셋째 줄까지는 이전과 똑같다. IE에 사용할 eot 파일을 지정한다. 여기서 셋째 줄과 넷째 줄에 두 번 eot 파일을 지정한 이유는 IE9의 호환성 보기 때문이다. 이전에 eot 파일에 따로 src:url( )을 지정한 이유는 IE는 src에 eot 파일 외 다른 파일이 있으면 eot 파일 외의 다른 파일까지 모두 읽어오려고 시도하고 그 때문에 제대로 웹폰트를 불러오지 못하거나 404 에러가 발생했기 때문이다. 이 문제를 해결하기 위해 eot 뒤에 물음표(?)를 추가했고 - 일종의 버그를 사용한 트릭이다. eot 뒤에 ?를 사용하면 IE는 query string으로 인식하고 뒷부분을 읽어오지 않는다. - 이로써 IE가 eot 외에 다른 형식을 읽지 않도록 제한했다. src:url('글꼴.eot?') format('eot'),url('글꼴.woff') format('woff')와 같은 형식으로 사용할 수 있었다는 의미다. 그러나 IE9의 호환성 보기에서는 IE7 또는 IE8을 사용해서 페이지를 표시하는데 여기서 사용하는 IE7과 IE8에선 앞에서 이야기한 버그가 수정되어서 ?가 추가된 eot 파일은 적용되지 않는다. 이런 이유로 셋째 줄에 IE9 호환성 보기만을 위한 src를 삽입하고 넷째 줄부터 다시 src를 지정한다.
넷째 줄은 앞에서 이야기한 ?를 사용해서 eot 파일을 지정한다. 그다음은 최신 브라우저 대부분에서 지원하는 woff를 정의한다. 그 뒤로 ttf, svg 순으로 font-face를 지정하면 끝이다. IE는 eot를 사용하고 Chrome, Opera, Safari, Firefox는 woff를 사용한다. 만약 IE9가 어떤 이유로 eot를 불러오지 못했을 땐 woff를 사용한다. 마찬가지로 Chrome, Opera, Firefox, Safari가 최신 버전이 아니라서 woff를 지원하지 않는다면 그다음 ttf를 불러와서 사용한다. ttf를 지원하지 않는 이전 버전의 모바일 사파리에선 svg를 사용한다. 위 방법은 앞에서 이야기한 세 가지 사항(WOFF, IE9 호환성 보기, 로컬 글꼴)을 모두 충족하며 이 방법으로 현재 사용되는 거의 모든 브라우저에서 웹폰트를 적용할 수 있다. (* svg 파일 이름 뒤에 #svgFontName 부분은 svg 파일을 메모장으로 연 다음 <font id=" "을 찾아 id 부분을 붙여 넣으면 된다.)
실제로 다음과 같이 적용할 수 있다.
@font-face {font-family: "c_l"; src: url('./images/C_L.eot'); src: url('./images/C_L.eot?iefix') format('eot'), url('./images/c_l.woff') format('woff'), url('./images/C_L.ttf') format('truetype'), url('./images/c_l-web.svg#webfontYkqvRtpy') format('svg')}
만약 로컬 글꼴을 사용하도록 수정하려면 두 번째 src: 뒤에 local('글꼴 이름'), 를 삽입한다. 또 svg 뒤의 id(#webfontYkqvRtpy)는 생략할 수 있다.
<Bulletproof @font-face: Smiley variation>
위 방법 외에 많이 사용하는 것으로 Paul Irish가 제안한 Bulletproof @font-face: Smiley variation이 있다.
@font-face {
font-family: '글꼴 이름';
src: url('./images/글꼴 파일.eot');
src: local('☺'),
url('./images/글꼴 파일.otf') format('opentype');}
이 방법은 local 부분에 글꼴 이름으로 절대 사용하지 않을 것 같은 스마일 아이콘을 삽입해서 로컬 글꼴 사용을 제한했다. 이 방법으로 eot, woff, otf/ ttf, svg를 모두 적용하면 아래와 같이 된다.
@font-face {
font-family: "글꼴 이름";
src: url("./images/글꼴 파일.eot");
src: local("☺"),
url("./images/글꼴 파일.woff") format("woff"),
url("./images/글꼴 파일.otf") format("opentype"),
url("./images/글꼴 파일.svg#filename") format("svg"); }
@font-face {
font-family: "이탤릭 글꼴 이름";
src: url("./images/이탤릭 글꼴 파일.eot");
src: local("☺"),
url("./images/이탤릭 글꼴 파일.woff") format("woff"),
url("./images/이탤릭 글꼴 파일.otf") format("opentype"),
url("./images/이탤릭 글꼴 파일.svg#filename-ital") format("svg"); }
* How to use CSS @font-face 참고
위 방법 역시 스마일 아이콘을 사용하고 eot, woff, otf, svg가 모두 적용된 것을 확인할 수 있다. 만약 기울임, 굵게 등의 효과를 사용하려면 위의 방식처럼 일반 글꼴과 이탤릭 또는 볼드 글꼴 두 가지를 모두 블로그에 올리고 CSS에서 역시 두 번 지정한 다음 실제 사용할 때 일반 글꼴은 '글꼴 이름'으로, 이탤릭은 '이탤릭 글꼴 이름'으로 지정하는 방식을 사용하면 된다.
그 외에 EOTFAST를 배포한 Readable Web의 Mo’ Bulletproofer @Font-Face CSS Syntax도 있다. 이 방식은 하나의 웹폰트를 적용하는데 @font-face를 두 번 사용하는 방식이라 개인적으로 좋아하지 않는다. 관심 있는 사용자는 위 링크에서 원문을 확인할 수 있다.
아래는 Fontspring @Font-Face Syntax을 사용해서 웹폰트를 적용한 모습이다. IE, Chrome, Opera, Safari에서 웹폰트가 적용되는 것을 확인할 수 있다. 단, Firefox는 도메인 문제로 적용되지 않고 Verdana로 표시된다.
| 웹폰트 적용 전 | 웹폰트 적용 후 |
|---|---|
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel mauris velit, et varius massa. Aliquam in nulla in tortor tincidunt aliquam. Mauris ullamcorper ante ac lectus dignissim quis convallis diam dictum. Integer vestibulum urna vitae lacus mattis consequat. Praesent quis lorem non purus interdum bibendum sit amet at risus. Praesent erat nibh, elementum quis bibendum id, interdum ac justo. Maecenas bibendum eros in eros mattis in ultrices urna tincidunt. Mauris gravida nulla quis nunc condimentum viverra quis lobortis orci. Vestibulum tempus odio a neque congue pretium. Nunc congue accumsan nibh euismod lacinia. Integer dolor nulla, molestie ornare fringilla vitae, gravida ac nisi. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel mauris velit, et varius massa. Aliquam in nulla in tortor tincidunt aliquam. Mauris ullamcorper ante ac lectus dignissim quis convallis diam dictum. Integer vestibulum urna vitae lacus mattis consequat. Praesent quis lorem non purus interdum bibendum sit amet at risus. Praesent erat nibh, elementum quis bibendum id, interdum ac justo. Maecenas bibendum eros in eros mattis in ultrices urna tincidunt. Mauris gravida nulla quis nunc condimentum viverra quis lobortis orci. Vestibulum tempus odio a neque congue pretium. Nunc congue accumsan nibh euismod lacinia. Integer dolor nulla, molestie ornare fringilla vitae, gravida ac nisi. |