Web Font - @font-face 적용 방법

Font(서체)의 사용

좀 더 흥미진진한 웹 사이트를 만들고 싶을 때 첫 번째로 고려하게 되는 것은, 표제어나 단락 등, 페이지를 구성하는 각 요소에 서로 다른 서체를 지정하는 것입니다.

최근의 모든 브라우저들은 웹 서체(Web Font)라는 것을 지원하며 사이트를 볼 때 다운되는 서체를 웹 폰트라고 합니다.

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

사용자는 이미 검증된 서체만 사용하는 방법을 택할 수도 있고(대부분의 컴퓨터에 설체된 기본 서체만 사용하는 방법), 아니면 웹 폰트를 사용해 더 많은 폰트 가운데 하나를 골라 쓰는 방법을 택할 수도 있습니다.(일은 더 많아지겠지만..)

이 가운데 어떠한 한 방법에 얽매일 필요는 없습니다. 일반적으로 두 방법을 함께 사용하고 있으며 어떤 경우에는 표준 폰트들을 사용(페이지의 주된 텍스트가 들어가는 부분)하고, 어떤 부분에는 웹 폰트(가령, 시선을 끄는 표제어를 만들어야 하는 경우)를 사용하는 것입니다.

 

우리 나라의 한글 폰트는 아쉽게도 글자 수가 많아 웹 폰트 도입이 활발하지는 않지만 외국에서는 Google Web Fonts 서비스와 Typekit, Cufon 등과 같은 관련 서비스가 활성화 되어 있습니다.

그리고 국내에선 모빌리스 웹폰트가 가장 많은 글꼴 서비스를 하는 것 같습니다.

font-family

font-family 속성을 사용해 서체를 지정하더라도, 방문자가 반드시 지정한 서체로 표시되는 페이지를 보게 되리라는 보장은 없습니다. 해당 폰트는 방문자의 컴퓨터에 이미 설치된 상태이거나, 웹 폰트의 경우라면 사이트의 방문과 함께 임시로 다운된 상태여야 합니다. 

그래서 일반적으로 웹 폰트를 사용할 때는 웹 사이트의 서버에 올려놓고 사용하는 경우가 많습니다. 

아무튼 여러분이 선호하는 서체를 방문자가 사용할 수 있으라는 보장이 없기 때문에, 주요 서체가 없을 경우 사용할 대안 폰트까지 명시하는 것이 일반적인 관습입니다.

font-family 에 명시한 첫 번째 서체가 컴퓨터에 없는 경우, 브라우저는 사용 가능한 서체를 발견할 때 까지 font-family 에 지정된 폰트 목록을 훑어 나갑니다. 따라서 대부분의 운영체제에 기본 설치되는 유사 서체 목록을 다음과 같이 지정해서 사용하곤 합니다.

css

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

위의 코드와 같은 경우는 웹 브라우저의 Times New Roman 폰트가 설치되어 있는지 살피고 있는 경우에는 해당 폰트를 사용한다. 설치되어 있지 않다면 그 다음 폰트, 그 다음 폰트를 훑어 나가게 됩니다.

또한 Time New Roman 폰트와 같이 서체 이름이 하나 이상의 단어로 구성되어 있다면 따옴표로 둘러 싸야 합니다.

웹 폰트(Web Font)의 사용

CSS에서 폰트를 사용하는 전통적인 방식은 직관적입니다.

웹 폰트를 위해 사용하는 CSS 코드는 매우 간단하며, 두 개의 CSS 명령어만이 필요합니다.

• @font-face 지시어는 웹 브라우저에게 서체 이름과 다운받을 위치를 알려줍니다.  이 명령어의 동작 방식은 뒤에서 살펴봅니다.
• font-family 속성의 사용법은 위에서 언급한 일반 폰트의 사용법과 같습니다. 일단 @font-face 를 사용해 브라우저에게 서체를 다운받으라 알린 다음에는, 어느 CSS에서도 일반 폰트와 동일하게 font-family를 통해 사용할 수 있게 됩니다.

Font Type(폰트 파일 유형)

믿거나 말거나지만, IE는 웹 폰트를 IE5 시절부터 지원해 왔습니다. 하지만 불행히도, 독특하고 까다로운 방법을 동원해 서체와 서식을 지정해야 합니다.

즉, 해당 폰트를 EOT(Embedded Open Type) 파일로 변환해야 합니다.(IE8에 이르러서도, 여전히 그렇다..)

웹 폰트에 사용되는 파일 타입은 이것 이외에도 다양하고 그 중 몇몇은 지원되는 브라우저의 제한이 있습니다.

아래에 폰트 파일 유형(타입)과 지원 브라우저 정보를 요약하였습니다.

• EOT(Embedded Open Type) :  IE에서만 통용됩니다. 일반 폰트 파일을 EOT로 변환하려면 특별한 도구가 필요합니다.
• TrueType과 OpenType : 컴퓨터의 Fonts 폴더를 열어보면 .ttf(TrueType format)와 .otf(OpenType format) 서체 파일들이 보일 것입니다. 대개 컴퓨터 서체 파일로 널리 사용되는 파일 형식입니다. 웹 페이지 뿐만 아니라, 워드 프로세싱이나 전자출판에도 사용할 수 있습니다. 이런 유형의 서체 파일은 대부분의 브라우저가 지원하며 IE9를 포함한 최신 버전의 IE, 크롬, 파이어폭스, 사파리, 오페라, iOS 사파리(4.2+), 그리고 블랙베리 브라우저 등이 여기에 해당합니다.
• WOFF(Web Open Font Format) : 이 파일은 웹을 주된 대상으로 설계된 파일 형식입니다. WOFF 서체는 기본적으로 TrueType이나 OpenType 서체를 압축한 것이기 때문에 일반적으로 파일 크기가 작아서, 다른 서체보다 신속히 다운로드됩니다. WOFF 파일은 다양한 브라우저 제조사의 지지도 받고 있어서 IE9 를 비롯한 모던 브라우저와 iOS 사파리(5+)에서 지원하고 있습니다. 하지만 안드로이드 진영에서 이 파일을 지원하지 않고 있어서 안드로이드 기기나 IE8 사용자는 서체를 다운받거나 표시할 수 없습니다.
• SVG(Scalable Vector Graphic) : 이 파일은 사실 서체 파일은 아닙니다. SVG는 사실 벡터 그래픽(확대해도 품질이 유지되는 이미지를 만드는 기술)을 위한 파일입니다. SVG 폰트를 지원하는 브라우저는 매우 제한적으로 IE, FF는 지원하지 않는다. SVG의 또 한가지 문제는 파일 크기가 TrueType의 거의 두 배, WOFF 파일의 거의 세 배에 달한다는 것입니다. SVG를 사용해 얻을 수 있는 진정한 이득은, iOS 사파라 4.1 이전 버전에서 인식하는 유일한 웹 폰트 타입이라는 것입니다.

다양한 폰트 파일 생성(변환)하기

가능한 한 많은 브라우저가 사용할 수 있도록 폰트를 제공하려면 사용자는 적어도 EOT, WOFF 그리고 Truetype 서체는 제공해야 합니다.

Font Squirrel 사이트에는 원하는 서체 파일을 만들 수 있도록 웹 기반 도구가 있습니다.

이 사이트의 메뉴 중 Generator 가 있는데, 이 도구를 사용하면 서체 파일 뿐 아니라 HTML 파일 예제와 기본적인 CSS 스타일시트도 만들 수 있습니다.

@font-face Generator 사용 방법

1. .ttf 서체나 .otf 의 사용하고자 하는 웹 폰트(웹 서체로 사용해도 좋다라는 라이센스를 가진)를 찾는다.
2. 위 사이트의 Generator 메뉴에서 UPLOAD FONTS를 클릭 후 사용하고자 하는 서체 파일을 업로드한다.
3. Coversion option

• Basic : 서체를 EOT, WOFF, SVG 타입으로 변환한다.
• Optimal : 파일 변환뿐만 아니라 서체의 성능과 속도를 향상시키는 개선 작업도 하기 때문에 좋은 옵션 항목이다.
• Expert : 변환에 관계된 모든 세부사항을 조정할 수 있도록 하는 옵션. 서체의 일부만을 변환할 수도 있다.(즉, 선택한 글자만 포함되도록 할 수 있다) 다시 말해서 사용하지 않는 글자들(가령, 세미콜론 기호나 느낌표, Q같은 일반 문자까지도)이 있다면, 서체 파일에서 생략할 수 있다.

모든 글자를 다 사용할 것 같다면 Optimal을 선택하는 것이 가장 좋습니다.

웹 폰트에 관한 법적 문제들

웹 서체를 사용하려면 법적인 문제도 해결해야 합니다. 소프트웨어와 마찬가지로 다양한 개인과 법인 사업자가 서페를 만들어 판매하고 있으며 웹 서버에 TrueType 서체를 올려서 방문자가 페이지를 볼 때 이용할 수 있도록 할 때에는 누구라도 해당 서체를 다운받아 자기 웹 사이트나 워드 프로세싱 프로그램에서 활용할 수 있음을 기억해야 합니다.

대부분의 폰트 제조업체들은 웹에서 사용을 금지하는 라이센스 정책을 취하고 있기 때문에 Adobe로부터 구매한 서체라 하더라도 아무런 조치 없이 웹에서 사용할 수는 없습니다. 그러려면 다른 종류의 라이센스를 다른 가격에 구매해야 합니다. 

컴퓨터에 설치되는 프로그램에 사용하는 것은 혀용되지만, 해당 폰트를 웹 서버에 올려 웹 폰트로 사용하는 것은 허용되지 않을 수도 있습니다.

웹에서 사용하는 것이 허용되는지 모르겠다면, 사용을 포기하고 웹에서 쓸 수 있는 서체를 찾아보는 것이 좋습니다.

서체에 관한 법적 문제를 피하려면 Google Fonts 같은 서체 서비스나 TypeKit 같은 Adobe의 상업적 웹 폰트 서비스를 이용하는 것이 좋습니다.

폰트 서비스는 상단 링크를 참조하세요.

@font-face 지시어의 사용 방법

필요한 서체 파일을 다운로드했다면 이제 실제로 사용해 볼 순서입니다.

우선, 여러분의 컴퓨터에 웹 사이트 파일을 보관하고 있는 위치로 파일들을 옮겨서 사아트 최상단 폴더 아래에 fonts라는 이름의 폴더(_fonts, webfonts 라는 이름도 많이 사용함)를 만듭니다.

원한다면 여러분이 CSS파일을 두는 폴더 안에 폰트 파일을 두어도 됩니다. 사실 폰트 파일을 여러분의 사이트 어디에 두느냐는 그다지 중요하지 않고 정리정돈을 잘 해두면 좋습니다.

웹 폰트 호환성

	IE	Chrome	Firefox	Safari	Opera
WOFF	IE9+	6.0	3.5	5.1	11.10
EOT	IE6~9 지원원	미지원	미지원	미지원	미지원

위 표를 보는 바와 같이 모던 브라우저들은 woff 파일을 모두 지원하기 때문에 사용하는데 무리가 없습니다.

언제나 우리를 괴롭히는 것은 구버전의 IE인데 IE8이하의 브라우저들은 eot 파일을 사용해야 합니다.

국내에서는 네이버에서 무료로 배포하고 있는 나눔 글꼴 시리즈를 많이 이용합니다.

Nanum-web-font.zip

Web Font Syntax(웹 폰트 문법)

웹 폰트의 마법은 @font-face 지시어라는 CSS 명령어부터 시작됩니다.

이 명령어는 사용할 폰트의 이름 및 해당 폰트를 다운받을 수 있는 위치를 브라우저에게 알리는 명령어입니다.

아래 코드에서 간단히 사용 방법을 살펴봅니다.

css

@font-face {
    font-family: <a-remote-font-name>
    src: <source> [, <source>]*;
    [font-weight: <weight>];
    [font-style: <style>];
}

속성값들의 내용은 아래와 같습니다.

• <a-remote-font-name> : font 속성에서 폰트명(font face)으로 지정될 이름을 설정한다.</a-remote-font-name>
• <source> : 원격 폰트(remote font) 파일의 위치를 나타내는 URL 값을 지정하거나, 사용자 컴퓨터에 설치된 폰트명을 local("Font Name")형식으로 지정하는 속성이다.
• <weight> : 폰트의 굵기(font weight) 값.</weight>
• <style> : 폰트 스타일(font style) 값.

Web Font Simple Usage(웹 폰트 간단 사용 예제)

css

@font-face{
    font-family:ng;
    src:url(NanumGothic.eot);
    src:local(※), url(NanumGothic.woff) format(‘woff’)
}

body{font-family:'나눔고딕', 'NanumGothic', ng}

• ng(이름은 원하는데로 작성가능)라는 글꼴 이름을 한 번만 선언한 다음 eot 형식과 woff 형식을 순차적으로 참조
• IE6~8은 eot 글꼴만 요청해서 화면에 표시한다(eot 형식을 woff 형식보다 먼저 참조하도록 한다)
• IE 9와 Chrome, Firefox, Safari, Opera는 woff 글꼴만 요청해서 화면에 표시(@font-face 명세에 의해 eot 글꼴에 대한 format('eot') 선언이 없기 때문에 브라우저가 eot 글꼴을 내려받아야 하지만 영리하게도 내려받지 않는다.
• local(※) 값은 외부 자원을 참조하기 이전에 시스템에 설치된 글꼴을 우선 참조할 수 있도록 만들어 준다. 그러나 이코드에서는 IE6~IE8이 local() 값을 처리하지 못하는 특징을 이용하여 woff 글꼴을 추가로 요청하지 않도록 해준다.
• local(※) 값의 괄호 안쪽에 포함된 ※ 기호는 사용자 시스템에 존재하지 않을만한 글꼴을 임의로 지정한 것. 굳이 2byte짜리 특수문자를 사용한 이유는 Mac OS에서 2byte짜리 문자열로 된 시스템 글꼴 이름은 아예 처리하지 않기 때문이다.
• format(‘woff’) 값을 명시적으로 작성하면 이 형식을 지원하는 브라우저만 글꼴을 내려받게 되어 있다. 값은 반드시 홀따옴표 또는 쌍따옴표 안에 있어야 하며 작성하지 않는 경우 지원 여부에 무관하게 모든 형식의 글꼴을 내려받는것이 명세이다. 글꼴을 지원하지 않으면서도 내려받는 상황을 예방하기 위해 이 형식을 지원하는 경우에만 외부 글꼴을 내려받도록 명시적으로 코드를 작성한 것이다. IE 7~8 브라우저는 이 코드를 해석하지 못하기 때문에 woff 글꼴을 추가로 요청하지 않도록 만들지만 여기서 그것이 목적은 아니다.
• 나눔고딕 시스템 글꼴의 이름을 한글과 영문으로 연거푸 두 번 적은 이유는 영문으로만 작성했을 때 제대로 표시하지 못하는 브라우저가 있기 때문이며 한글 이름이 있는 글꼴은 한글과 영문 모두 작성하는 것이 좋다.

사용자의 로컬환경(local computer)에 설치된 폰트는 local() 이라는 구문을 사용하여 지정이 가능하다. 만약 해당 폰트를 찾지못한다면, 다른 대체 폰트를 찾을때까지 폰트를 검색작업을 계속 할 것이다.

@font-face 실제 사용 예제

아래 코드를 통해 보다 세부적인 내용을 더 알아봅니다.

css

@font-face{
    font-family:'NanumGothic';
    src:url('fonts/NanumGothic.eot');
    src:url('fonts/NanumGothic.eot?#iefix') format(‘embedded-opentype’),
        url('fonts/NanumGothic.woff') format(‘woff’),
        url('fonts/NanumGothic.ttf') format('truetype'),
        url('fonts/NanumGothic.svg') format('svg');
}

• 세 번째 줄은 IE9의 호환성 모드 때문에 필요합니다. 호환성 모드에서 IE9는 IE8처럼 렌더링됩니다. 이 묘한 기능은 IE8(또는 그 이전 버전 IE)의 버그를 고려해 디자인된 웹 사이트가 IE9에서도 제대로 보이도록 하기 위한 것입니다. IE9에서 호환성 모드를 사용하려면 사용자가 의도적으로 해당 모드를 활성화해야 하므로, 호환성 모드를 고려하지 않는다면 아마도 이 줄은 제외시키도 상관없을 것입니다.
• 네 번째 줄부터 두번째 src 속성이 시작됩니다. 첫 폰트 파일이 .eot 파일인데 파일 이름끝에 ?#iefix 가 붙어 있습니다. 이것은 IE6~8까지의 브라우저에 있는 버그때문에 필요합니다. URL의 .eot 다음에 ?#iefix를 붙이지 않으면 해당 폰트는 IE8과 그 하위 버전에서는 제대로 표시되지 않을 것입니다.

src 속성에 나열하는 파일 목록 마지막에는 세미콜론을 두어 src 속성의 끝임을 반드시 표시해야 합니다.

이 세미콜론(;)을 빼 먹으면 @font-face 지시어는 올바르게 동작하지 않을 것입니다.

여러 가지 유형의 서체 파일을 지원하는 브라우저라 해도(가령 크롬은 WOFF, TrueType, SVG 등을 지원한다) 이 모든 파일을 다 다운받지는 않는다. 

대신, 목록에 적힌 서체 파일 가운데 자기가 지원하는 것 하나를 골라 다운받는다. 

가령 크롬의 경우 위의 코드를 만나면 .eot 파일은 건너뛰고(크롬은 이 형식 서체는 이해하지 못한다) .woff 파일을 다운로드한다. TrueType 이나 SVG 파일은 아예 무시한다. 따라서 서체 파일을 명시하는 순서가 아주 중요하다. 

일반적으로 WOFF 의 파일 크기가 다른 서체 파일보다 작으므로 WOFF 를 앞에 두는 것이 좋다. SVG 파일의 크기는 보통 다른 서체 파일들보다 크다. 그러니 서체 파일의 순서는 .eot, .woff, ttf, .svg 의 순으로 하는 것이 좋다.

굵은 서체나 이탤릭 서체를 추가하는 방법(Bold, Italic)

bold나 italic 폰트를 추가하는 쉬운 방법은 @font-face 지시어의 font-weight와 font-style 속성을 사용하는 것입니다.

다만, 굵은 서체나 이탤릭체 파일에 해당하는 @font-face 를 지정해 주어야 합니다.

예를 들어 나눔고딕 일반 서체와 볼드체, 이탤릭체가 있다고 가정하고 살펴보겠습니다.

css

@font-face{
    font-family:'NanumGothic';
    src:url('fonts/NanumGothicRegular.eot');
    src:url('fonts/NanumGothicRegular.eot?#iefix') format(‘embedded-opentype’),
        url('fonts/NanumGothicRegular.woff') format(‘woff’),
        url('fonts/NanumGothicRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face{
    font-family:'NanumGothic';
    src:url('fonts/NanumGothicBold.eot');
    src:url('fonts/NanumGothicBold.eot?#iefix') format(‘embedded-opentype’),
    url('fonts/NanumGothicBold.woff') format(‘woff’),
    url('fonts/NanumGothicBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face{
    font-family:'NanumGothic';
    src:url('fonts/NanumGothicItalic.eot');
    src:url('fonts/NanumGothicItalic.eot?#iefix') format(‘embedded-opentype’),
    url('fonts/NanumGothicItalic.woff') format(‘woff’),
    url('fonts/NanumGothicItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

위 코드와 같이 세 가지 서체를 전부 지원하려면 @font-face를 세 번 사용해야 합니다.

그리고 여기서 주목해야 할 것은 font-family에 적는 이름은 서체의 일반적 이름을 사용하고 font-family의 이름은 모두 항상 같다는 점 입니다.

NanumGothicBold처럼, 특정한 서체 스타일을 지칭하는 이름을 사용하지 않는 것입니다.

또한 사용자 정의의 폰트 네이밍을 정해서 통일시켜서 사용 가능합니다.(예를 들어 Nanum 이라고 정의해도 가능)

이 방법의 장점은 사용자는 HTML 텍스트에 <em>, <strong> 등의 태그를 적절하게 부여하는 데만 집중하면 서체를 로드하고 사용하는 등의 잡일은 브라우저가 알아서 한다는 것 입니다.

즉, <strong> 태그에 해당 서체의 볼드체를 지정할 필요가 없습니다.

하지만 불행하게도, IE8이하에서는 앞서 언급한 방법이 통하지 않습니다. 아마 모든 텍스트에 나눔고딕 레귤러 폰트가 적용되고 말 것입니다.

IE는 <em>, <strong> 에 적용할 가짜 이탤릭 서체와 가짜 굵은 서체를 만들어 냅니다.

다시 말해 나눔고딕 레귤러 서체를 조작하여 화면에 이탤릭 글자로 표시하거나 굵은 글씨로 표시하거나 하는 것입니다.

IE8 이하에서의 굵은 글씨 / 이탤릭 서체 지원

IE8과 그 이전 버전 브라우저를 지원하려면 해야 할 일이 조금 더 많아집니다.

@font-face 지시어들은 아래와 같이 수정되어야 합니다.

css

@font-face{
    font-family:'NanumGothicRegular';
    src:url('fonts/NanumGothicRegular.eot');
    src:url('fonts/NanumGothicRegular.eot?#iefix') format(‘embedded-opentype’),
        url('fonts/NanumGothicRegular.woff') format(‘woff’),
        url('fonts/NanumGothicRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face{
    font-family:'NanumGothicBold';
    src:url('fonts/NanumGothicBold.eot');
    src:url('fonts/NanumGothicBold.eot?#iefix') format(‘embedded-opentype’),
    url('fonts/NanumGothicBold.woff') format(‘woff’),
    url('fonts/NanumGothicBold.ttf') format('truetype');
}

@font-face{
    font-family:'NanumGothicItalic';
    src:url('fonts/NanumGothicItalic.eot');
    src:url('fonts/NanumGothicItalic.eot?#iefix') format(‘embedded-opentype’),
    url('fonts/NanumGothicItalic.woff') format(‘woff’),
    url('fonts/NanumGothicItalic.ttf') format('truetype');
}

위 코드를 살펴보면 별도의 font-family 이름이 사용되었음을 주목해 보기 바랍니다. 지원하는 서체 스타일에 따라 붙여진 이름이고 또한 font-weight와 font-style 속성은 사용하지 않았습니다.

그리고 여기서 끝나지 않고 태그에 따라 서체 이름을 다음(웹페이지 제작환경에 따라 다를 수 있음)과 같이 지정해야 합니다.

css

p {
    font-family: NanumGothicRegular;
    font-style: normal;
    font-weight: normal;
}

em {
    font-family: NanumGothicItalic;
    font-style: normal;
    font-weight: normal;
}

strong {
    font-family: NanumGothicBold;
    font-style: normal;
    font-weight: normal;
}

또 하나 유의할 것은 위 코드에서 보았듯이 font-weight와 font-style을 normal로 지정하고 있다는 사실입니다. 그렇게 하지 않으면 IE를 비롯한 많은 브라우저가 '이미 굵은 글씨로 표시된 텍스트'를 다시 굵은 글씨로 표시하거나, '이미 이탤릭체로 표시된 텍스트'를 다시 이탤릭으로 만들려는 시도를 할 것입니다.(파이어폭스는 매우 흉한 가짜 서체를 만들어 처리한다)

이 기법을 사용하려면 확실히 손이 많이 가고 사이트 내에서 사용해야 하는 서체 종류가 많을 경우에는 더 심각해 질 것입니다.

어떤 방법을 사용할 것이냐는 IE8 지원이 여러분에게 얼마나 중요한 사안이냐에 따라 다를 것입니다.

IE8 지원 문제를 해결하는 방법이 또 하나 있습니다. 이미 사용한 첫번째 방법을 시도하여 IE8에서 어떻게 보이는지를 확인하는 것입니다.

sans-serif 계열의 서체 가운데 일부는 IE가 가짜 이탤릭 서체나 가짜 굵은 서체를 만들어 표시하더라도 그다지 흉하지 않을 수도 있습니다. 

따라서, 차이가 미미하다면 그냥 첫 번째 방법을 사용해도 됩니다. 

IE8의 시장 점유율은 새로운 컴퓨터나 체제가 나오면서 그리고 크롬 등의 브라우저 사용률이 높아지면서 계속 감소할 것입니다.(희망사항~)

font-weight: bold 를 지정할 때 유의해야할 점은 디자인 웹폰트 자체가 볼드로 제작되었음에도 CSS 의 font-face 를 bold 로 지정하게 되면, 볼드처리된 디자인 웹폰트에 또 다시 볼드처리를 하는 격이기 때문에 원하지 않는 결과를 초래할 수 있습니다.

@media 규칙 내부에 웹폰트 사용하기

미디어 쿼리를 이용하여 모바일기기등에서는 웹폰트를 다운로드 받지 않기 위해 사용되는 방법입니다.

이때 IE 9는 미디어쿼리 안의 @font-face를 무시하기 때문에 조건부 주석문을 사용한다.

css

<!–[if IE 9]>
<style>
/* This code is used only in IE 9 */
@font-face{
font-family: ng;
src: url(NanumGothic.eot)
}

body{ font-family:나눔고딕, NanumGothic, ng }
</style>
<![endif]–>

나머지 브라우저들에서는 미디어쿼리를 이용합니다.

css

/* IE 9 does not support @font-face within @media */
@media all and (min-width:768px) {
  @font-face{
    font-family:ng;
    src:url(NanumGothic.eot);
    src:local(※), url(NanumGothic.woff) format(‘woff’)
  }

  body {
    font-family: 나눔고딕, NanumGothic, ng;
  }
}

IE 6~8 브라우저는 미디어쿼리를 지원하지 않기때문에 Polyfill의 일종인 respond.js와 같은 라이브러리를 필요로 합니다.

jaehee's webclub