이 페이지는 Cloud Translation API를 통해 번역되었습니다.

@font-face를 통한 웹폰트에 대한 빠른 가이드

Paul Irish

소개

CSS3의 @font-face 기능을 사용하면 웹에서 액세스 가능하고 조작 가능하며 확장 가능한 방식으로 사용자 지정 서체를 사용할 수 있습니다. 그러나 'Cufon, sIFR을 사용하고 이미지에 텍스트를 사용하는 경우 @font-face를 사용하는 이유는 무엇인가요?'라고 말할 수 있습니다. 맞춤 글꼴에 @font-face를 활용할 때의 이점은 다음과 같습니다.

찾기별 전체 검색 가능 여부 (ctrl-F)
스크린 리더와 같은 보조 기술에 대한 접근성
브라우저 내 번역 또는 번역 서비스를 통해 텍스트 번역 가능
CSS에는 line-height, letter-spacing, text-shadow, text-align, 선택기(예: ::first-letter, ::first-line) 등 서체 표시를 조정할 수 있는 완전한 기능이 있습니다.

@font-face 본질

가장 기본적인 수준에서, 우리는 다음과 같이 사용할 새로운 맞춤 원격 글꼴을 선언합니다.

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.ttf');
}

그런 다음 다음과 같이 사용합니다.

h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }

이 @font-face 선언에서는 font-family 속성을 사용하여 글꼴 이름을 명시적으로 지정합니다. 글꼴의 실제 명칭과 관계없이 무엇이든 될 수 있습니다. font-family: 'SuperDuperComicSans';는 잘 작동하지만 내 평판에 적합하지 않을 수 있습니다. src 속성에서 브라우저가 글꼴 애셋을 찾을 수 있는 위치를 가리킵니다. 브라우저에 따라 유효한 글꼴 유형으로는 eot, ttf, otf, svg 또는 전체 글꼴 데이터를 인라인으로 삽입하는 데이터 URI가 있습니다.

	otf 및 ttf	svg	woff	EOT
IE	IE9		IE9	Internet Explorer 5 이상
Firefox	FF3.5	FF3.5	FF3.6
Chrome	크롬 4	Chrome 0.3	Chrome 5
Safari	3.1	3.1
오페라	Opera 10.00	오페라 9
iOS		iOS 1
Android	2.2

물론, 그렇게 간단한 것은 절대 아닙니다. 위 코드의 초기 제한사항은 IE 6~8에 EOT를 제공하지 않았다는 점입니다. bulletproof @font-face 구문은 이 문제를 해결하는 방법을 제안했습니다. 강력한 버전도 다음과 같습니다.

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.eot'); /* IE 5-8 */ 
  src: local('&#9786;'),             /* sneakily trick IE */
        url('tagesschrift.woff') format('woff'),    /* FF 3.6, Chrome 5, IE9 */
        url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
        url('tagesschrift.svg#font') format('svg'); /* iOS */
}

아직 두통이 있나요? 빠르게 시작하고 싶은 경우 Font Squirrel 생성기를 사용해 보세요. 이 도구는 전체 프로세스를 간소화하여 글꼴을 가져와서 변형과 CSS를 자동으로 만들어 줍니다. 오늘날 웹 글꼴을 실제로 적용하는 데 필수적입니다.

모바일 지원 여부

모바일 Safari는 iOS 3.1부터 SVG 웹 글꼴을 지원하고 Android는 버전 2.2부터 otf/ttf를 지원합니다. 그렇다면 모바일 사용자에게도 이렇게 향상된 타이포그래피 환경이 제공되어야 할까요? 사용하지 않는 것이 좋습니다. 주된 이유는 WebKit이 @font-face를 통해 맞춤 글꼴을 기다리는 텍스트를 처리하는 방식 때문입니다. 텍스트는 표시되지 않습니다. 따라서 대역폭이 낮은 모바일 연결에서는 최대 50, 000개의 글꼴 데이터가 로드될 때까지 사용자에게 텍스트가 전혀 표시되지 않습니다. Webkit팀에서는 몇 초가 지나면 대체 글꼴을 사용 설정하는 솔루션을 찾고 있지만, 이 기능이 지원되기 전까지는 사용자를 콘텐츠와 콘텐츠 사이에 막는 것은 공정하다고 생각하지 않습니다.

웹폰트 서비스

많은 서비스가 간편한 API에 @font-face 기능을 래핑합니다. 이 기능을 사용하면 단일 CSS 또는 스크립트 행을 HTML 및 일부 구성에 추가하면 모든 작업이 완료됩니다. WebInk, Typekit, Fontslive와 같은 여러 서비스에서 월간 요금을 지불하고 글꼴을 사용할 수 있습니다 (경우에 따라 대역폭 한도까지도 가능). 이러한 서비스를 사용하면 브라우저 간 솔루션 제공에 따른 일부 복잡성을 분산하여 일반 개발자에게 매우 편리합니다.

Google Font API를 사용하면 스타일시트에 연결하고 Google에서 브라우저 간 브라우저 및 성능 문제를 처리하도록 함으로써 무료로 선별된 소규모의 무료 라이선스 글꼴을 사용할 수 있습니다. 이는 웹폰트를 사용하여 순조롭게 시작하고 실행하는 가장 빠른 방법입니다.

전문적인 @font-face용 서체 찾기

디자이너들이 흔히 겪는 놀라운 점은 그래픽 디자인 등에 사용하기 위해 글꼴 라이선스를 구입했다고 해서 @font-face에서 사용할 수 있다는 의미는 아니라는 점입니다. @font-face (또는 웹 삽입) 라이선스는 일반적으로 별도로 판매됩니다. 계약서를 주의 깊게 읽고 궁금한 점이 있으면 언제든지 글꼴 파운드리에 문의하세요. Fontspring은 수백 가지 고급 전문 글꼴을 판매하는 글꼴 부티크로, 모두 @font-face와 함께 사용할 수 있도록 사용이 허가되었습니다. FontFont 및 기타 파운더리에서는 @font-face 라이선스를 직접 판매하기 시작했지만, 현재는 브라우저 시장의 상당 부분은 축소되고 있지만 WOFF와 EOT만 타겟팅하고 있습니다. 많은 파운드리들이 카탈로그에 웹폰트 라이선스를 추가하고 있습니다. 선택한 글꼴에 대한 웹폰트 라이선스를 찾을 수 없다면 해당 업체에 문의하여 문의하세요.

FOUT 처리

Flash of Unstyled Text는 Firefox 및 Opera의 현상으로, 소수의 웹 디자이너가 좋아하지 않습니다. @font-face를 통해 맞춤 서체를 적용하면 페이지를 로드할 때 글꼴이 아직 다운로드 및 적용되지 않은 짧은 순간에 font-family 스택의 다음 글꼴이 사용됩니다. 이로 인해 업그레이드되기 전에 다른 (일반적으로 보기 좋지 않은) 글꼴의 플래시가 발생합니다.

ALT_TEXT_HERE — HTML5 슬라이드 자료의 '스타일이 지정되지 않은 텍스트' 플래시

Google Font API와 함께 제공되는 WebFont Loader는 다수의 이벤트 후크를 제공하여 사용자가 많은 로드를 제어할 수 있도록 하는 자바스크립트 라이브러리입니다. 다른 브라우저에서 @font-face 글꼴이 로드되는 동안 대체 텍스트를 숨기는 WebKit의 동작을 모방하도록 하는 방법을 살펴보겠습니다.

<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
  custom: {
    families: ['Tagesschrift'],
    urls: ['http://paulirish.com/tagesschrift.css']
  }
});
</script>

/* we want Tagesschrift to apply to all h2's */
.wf-loading h2 {
  visibility: hidden;
}
.wf-active h2, .wf-inactive h2 {
  visibility: visible;
  font-family: 'Tagesschrift', 'Georgia', serif;
}

JavaScript를 사용 중지하면 텍스트가 내내 계속 표시되며, 글꼴 오류가 있으면 기본 Serif로 안전하게 대체됩니다. 당장은 이를 임시방편으로 생각하세요. 대부분의 웹폰트 전문가들은 2~5초 동안 대체 텍스트를 숨겼다가 다시 드러내고 싶어 합니다. 대역폭이 낮고 휴대기기는 이러한 시간 초과로 인해 큰 이점이 있습니다. 당연히 모질라에서는 조만간 이 문제를 해결하려고 합니다.

더 가볍지만 덜 효과적인 솔루션은 font-size-adjust 속성입니다. 이 속성은 현재 Firefox에서만 지원됩니다. 글꼴 스택에서 x-height를 정규화하여 FOUT에서 눈에 띄는 변화의 양을 줄일 수 있습니다. 실제로 Font Squirrel generator는 업로드하는 글꼴의 x-높이 비율을 알려주는 기능을 방금 추가했습니다. 이제 font-size-adjust 값을 정확하게 설정할 수 있습니다.

요약

웹폰트는 디자이너에게 상당히 자유롭고 자유 합자 및 스타일 대안과 같은 출시 예정인 기능을 통해 훨씬 더 많은 유연성을 제공할 것입니다. 지금은 배포된 브라우저의 98% 를 지원하는 CSS3의 이 부분을 자신 있게 구현할 수 있습니다. 즐거운 시간 되세요.