웹 폰트 적용 방법-font-family, Font Type, @font-face

웹에서 사용되는 폰트를 일반적으로 웹 폰트라고 부르고 있습니다. 일반 폰트와 달리 웹폰트는 웹페이지 내에서 주로 사용할 목적으로 만들어진 특정 폰트들을 지칭하는 단어라고 보면 되겠습니다.

웹폰트를 사용하기 위해서 기본적으로 font-family, Font Type, @font-face 그리고 저작권 관련 정보들에 대한 이해가 있어야 합니다.

그래서 오늘은 HTML, CSS 웹 폰트 적용하기 위해 기본적으로 알아야하는 font-family, Font Type, @font-face 를 사용하는 기본적인 내용 에 대해서 알아 봅니다.

해당 포스트는 충분한 테스트 및 검증 후 작성 되었지만 이것이 내용의 정확성이나 신뢰성에 대해 보증을 하는 것은 아니니 단순 하게 참고용으로 봐주시길 바랍니다.

기본적인 폰트 설정 `font-family`

일반적으로 사이트를 방문한 사용자가 자신의 PC에 폰트가 없다면 제작자가 의도한 대로 디자인을 볼 수가 없기 때문에 CSS, 스타일시트 내에서 font-family 속성 정의를 통해서 사용해야 합니다.

body {
  font-family : arial, verdana, 'gulim', 'gothic', 'Times New Roman'
}

원하는 태그 또는 클래스에 font-family 속성을 통해 지정하고자 하는 폰트를 작성합니다.

font-family 은 우리말로 번역하자면 글꼴 집합인데, 여러 개의 글꼴을 모아 놓은 것입니다.
글꼴을 하나만 지정 해두면 사용자의 PC 에 해당 글꼴이 없는 경우 기본 값으로 표시가 됩니다.
font-family 는 다시 family-name 과 generic family 로 나누어집니다
- family-name: 글꼴 이름 arial, verdana,나눔고딕, 궁서, 굴림 등
- generic family: 모양이 비슷한 글꼴들의 그룹. Serif(바탕체), Sans-serif(고딕체), Cursive(필기체) 등
오류 없이 사용하려면 폰트 명에 영문을 사용해야 합니다.
폰트 명에 띄어쓰기가 있는 경우 '폰트 명' 과 같이 따옴표로 감싸주어야 하는데 기억하기 어렵다면 쉽게 모든 폰트 명을 따옴표로 감싼 준다고 생각하면 됩니다.
여러 개의 폰트를 설정하는 경우 '폰트 명1', '폰트 명2', '폰트 명3' 과 같이 콤마로 구분해서 사용해야 합니다. 이 경우 왼쪽에 위치한 폰트부터 적용합니다. 첫 번째 폰트를 적용하지 못한 경우 바로 뒤에 있는 폰트들이 차례로 적용합니다.

폰트 파일 유형 Font Type

Internet Explorer (이하 IE) 는 웹 폰트를 IE5 시절부터 지원해 왔지만 폰트를 EOT(Embedded Open Type) 파일로 변환해 서체와 서식을 지정해야 했습니다.

웹 폰트에 사용되는 파일 타입은 .eot 외에도 다양하지만 그 중 일부는 폰트를 사용할 수 있는 브라우저에 제한 사항이 존재 합니다.

폰트 파일 유형(Font Type) 에 대한 기본적인 내용 과 지원 브라우저 정보들은 아래와 같습니다.

TrueType과 OpenType: 사용 중인 PC의 Fonts 경로를 확인해보면 .ttf (True Type Format) 와 .otf (Open Type Format) 서체 파일들을 확인 할 수 있을 것입니다. 일반적으로 PC 서체 파일로 가장 널리 사용되기 때문인데요. 이외에도 웹 페이지 와 전자 출판 등 에서도 사용할 수 있습니다. 가장 널리 사용 되기 때문에 이런 유형의 서체 파일은 대부분의 브라우저가 지원하며 IE9를 포함한 최신 버전의 Chrome, Opera, Firefox, Safari 브라우저 등이 여기에 포함 됩니다. .otf 는 Mac 용 서체 .ttf 는 Windows 용 서체라는 잘못된 인식이 있지만 Windows 와 Mac에서 동일하게 지원합니다
- OpenType: 마이크로소프트사가 개발하다가 나중에는 어도비 사와 결합하였습니다. 오픈타입은 1996년에 처음 선을 보였으며 수많은 오픈타입 글꼴이 2000년에서 2001년 사이에 떠오르기 시작했습니다.
- TrueType: 애플에 의해 개발된 폰트로, Mac 과 Windows 운영체제에서 일반적으로 사용합니다.
WOFF(Web Open Font Format): 이 파일은 2009년에 개발된 폰트로 웹을 주된 대상으로 설계된 파일 형식입니다. WOFF 서체는 앞서 설명한 TrueType 이나 OpenType 서체를 압축한 것이기 때문에 다른 폰트보다 로딩이 빠르다는 장점으로 인해 W3C¹ 의 권고안으로 지정이 되어 있습니다. .woff 파일은 다양한 브라우저 제조사의 지지도 받고 있어서 IE9 를 비롯한 브라우저와 iOS Safari (5+)에서도 지원하고 있습니다. 하지만 안드로이드 와 IE8 이전 브라우저에서 해당 파일을 지원하지 않고 있어서 해당 환경에서 사용하는 경우 서체를 다운받거나 표시할 수 없습니다.
EOT(Embedded Open Type): IE 에서만 통용되는 폰트 파일입니다. 일반 폰트 파일을 EOT 로 변환할 수 있습니다.
SVG(Scalable Vector Graphic): 이 파일은 사실 서체 파일은 아니고 벡터 그래픽을 위한 파일입니다. SVG 폰트를 지원하는 브라우저는 매우 제한적으로 IE8 이전 버전은 지원하지 않습니다. SVG 단점 중 하나는 파일 크기가 .ttf 의 거의 두 배, .woff 파일의 거의 세 배에 달한다는 것입니다. SVG 는 2차원 그래픽을 표현하기 위해 XML을 기반으로 만들어진 XML 그래픽 표준 폰트입니다. XML의 개방성, 상호 운용성 등의 장점으로 인해서 다양한 웹 어플리케이션에 적용되고 있습니다.

웹 폰트 `@font-face`

CSS, 스타일 시트 내에서 `font-family` 속성 정의를 통해서 사용한다고 전술했습니다. 이 때 font-family 속성에 지정한 폰트가 웹사이트를 방문한 사용자의 PC 에 존재 하지 않는다면 @font-face 속성을 통해 직접 서버에서 다운로드해서 적용할 수 있도록 해 줍니다.

기본적인 `@font-face` 사용 법

@font-face 속성(지시어)을 이용하면 서버 또는 웹 사이트 사용자 PC 에 설치 되지 않은 폰트를 보여지도록 할 수 있습니다.

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

속성 값들의 설명은 아래와 같습니다.

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

참고: 웹 사이트(서버)에 직접 폰트를 업로드하지 않더라도 Google Fonts 등을 통해서 간단하게 웹 폰트를 적용할 수 있습니다.

웹 폰트 `@font-face` 추천 사용법

실제 웹 폰트 @font-face 를 사용하는 경우 아래와 같이 진행합니다.

@font-face{ 
  font-family: ezfont; 
  src:url(nanumsquare.ttf) format('ttf'); 
} 


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

속성 값들의 설명은 아래와 같습니다.

font-family 의 이름은 ezfont 와 같이 사용하기 편한 이름을 임의로 작성하거나 실제 폰트이름으로 지정할 수 있습니다.
format은 브라우저에서 지원 가능한 파일만 다운로드 받을 수 있도록 하기 때문에 필히 사용합니다. 예를들어, 크롬은 EOT를 지원하지 않는데 format을 명시해두면 알아서 다운 받지 않습니다.
나눔고딕 글꼴 과 같이 한글 명칭과 영문 명칭이 혼용 되는 경우 영문으로만 작성했을 때 제대로 표시하지 못하는 브라우저가 있습니다. 이와 같이 한글 이름이 있는 글꼴은 한글과 영문 모두 작성하는 것을 권장합니다.

IE Legacy 버전에서 사용하기

@font-face { 
  font-family: 'NanumSquare'; 
  font-weight: 400; 
  src: url(NanumSquareR.eot); 
  src: url(NanumSquareR.eot?#iefix) format('embedded-opentype'), 
       url(NanumSquareR.woff) format('woff'), 
       url(NanumSquareR.ttf) format('truetype'); 
}

속성 값들의 설명은 아래와 같습니다.

글꼴 이름을 font-family: 'NanumSquare' 와 같이 한 번만 선언한 다음 .eot 형식과 .woff 형식을 순차적으로 참조하는데, IE 6~8 은 eot 형식을 woff 형식보다 먼저 참조하려고 해 eot 글꼴 만 요청해 화면에 표시하려고 합니다.
IE 9 와 Chrome, Opera, Firefox, Safari 브라우저들은 .woff 글꼴만 요청해서 화면에 표시하는 선언이 없기 때문에 브라우저가 .eot 글꼴을 직접 내려받아야 하지만 기본적으로 내려받도록 되어 있습니다.
위 내용을 참고해 src 에 .eot, .woff, .ttf 파일들을 구한 다음 위와 같이 경로로 지정하면 되겠습니다.

웹 폰트에 관한 법적 문제들

웹 폰트 사용과 라이센스 정책의 이해

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

대부분의 폰트 제조업체들은 웹에서 사용을 금지하는 라이센스 정책을 취하고 있기 때문에 구매한 서체라 하더라도 아무런 조치 없이 웹에서 사용할 수는 없습니다. 예를 들면 PC에 설치되는 프로그램에 사용하는 것은 허용되지만, 해당 폰트를 웹 서버에 올려 웹 폰트로 사용하는 것은 허용되지 않을 수도 있습니다.

대상 폰트의 사용 범위가 웹에서 사용이 가능 한 지 그렇지 않다면 관련 라이센스를 체크 후 구매 후 적용을 해야 합니다.

연락처: 1800-5455
상담시간: 평일 오전 9시 ~ 오후 6시까지. 휴일 및 업무 시간 외에는 상담 예약 (연락처 남기기) 가능.

마무리

이렇게, HTML, CSS 웹 폰트 적용하기 위해 기본적으로 알아야 하는 font-family, Font Type, @font-face 를 사용하는 기본적인 내용에 대해 알아 보았습니다.

@font-face 를 사용해 직접 폰트를 정의하여 사용자들로 하여금 원하는 디자인을 볼 수 있도록 하는 것을 살펴보았습니다. 폰트 파일 형식에 모든 파일을 넣어 둘 필요는 없습니다. OTF 파일형식과 W3C 권고안 기준으로 지정 된 WOFF 파일 형식 두 가지 정도만 지정 해 둔다고 해도 현재 사용 중인 모든 웹 브라우저에서 사용할 수 있기 때문입니다.

하지만, 웹사이트를 오픈 하면서 생길 수 있는 변수가 있기 마련이어서 정의하고자 하는 폰트 외에 '돋움', '굴림'과 같은 표준 폰트를 등록 해 두고 특별한 상황에서 생길 수 있는 변수를 줄이는 것을 권장합니다.

웹 폰트 적용 방법-font-family, Font Type, @font-face

기본적인 폰트 설정 `font-family`

폰트 파일 유형 Font Type

웹 폰트 `@font-face`

기본적인 `@font-face` 사용 법

웹 폰트 `@font-face` 추천 사용법

IE Legacy 버전에서 사용하기

웹 폰트에 관한 법적 문제들

웹 폰트 사용과 라이센스 정책의 이해

한국저작권위원회 저작권상담센터

마무리

관련 글

Leave a Comment 응답 취소