[CSS] font-face 사용방법

웹폰트란?

방문자의 로컬 컴퓨터의 폰트 설치 여부와 상관없이 온라인 특정 서버에 위치한 폰트를 다운로드하여

화면에 표시해주는 웹 전용 폰트입니다.

 

@font-face를 사용하여 웹페이지 제작자가 원하는 폰트를 사용할 수 있게 합니다.

font-face 규칙은 css3에서 새롭게 추가된 규칙입니다.

html 문서에서 웹폰트를 적용할 때 사용하는 규칙으로, 웹 서버에 저장되어 있는 글꼴을 내려받아 화면에 표시해 주는 방식입니다.

간단히 말해서 웹브라우저에게 다운받은 서체의 이름과 위치를 알려주는 거죠

 

*작성법

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

 

• font-family : 폰트명을 지정합니다.
• <source> : 폰트의 위치를 나타내는 URL 값을 지정합니다.
• <weight> : 폰트의 굵기입니다.
• <style> : 폰트 스타일입니다.

✨ 예시

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

font-family : 폰트명을 NanumSquare 라고 지정합니다. 원하는 이름으로 지어도 괜찮습니다.

유지보수가 까다로워지지 않게 저는 폰트명을 통일시킵니다.

 

src : url() 과 local() 두 가지 속성을 사용합니다.

위 예시를 보면,  local('NanumSquareR'), local("NanumSquare")를 읽고 방문자의 컴퓨터에 이 폰트가 설치됐는지 찾습니다.

없다면 다음으로 넘어가 url('../font/NanumSquareR.eot?#iefix') format('embedded-opentype'),    를 찾습니다.

다음으로 넘어가면서 불필요한 다운로드를 막기 위해

format 속성을 사용합니다.

format 속성을 사용해 브라우저에 지원 가능한 파일만 다운로드할 수 있습니다.

 

폰트 타입

• EOT(Embedded Open Type) :  IE에서만 사용합니다.
• IE6~8의 경우 format() 구문을 인식하지 못해 다른 파일도 다운로드합니다. 이를 방지하기 위해서 eot 파일 확장자 뒤로 ?iefix 를 삽입해줍니다.
• TrueType과 OpenType : ttf(TrueType format)와 otf(OpenType format) 서체 파일입니다. 대부분의 브라우저에서 지원합니다.
• WOFF(Web Open Font Format) : 이 파일은 웹을 주된 대상으로 설계된 파일 형식입니다. 안드로이드는 지원하지 않습니다.

IE6~8의 경우 format() 구문을 인식하지 못해
다른 파일도 다운을 받습니다.
이걸 방지하기 위해 eot파일 확장자 뒤로 ?#iefix 를 삽입해줍니다.

 

영문과 한글을 혼용하는 경우에는 영문 폰트를 먼저, 그다음 한글 폰트를 지정해 줘야 합니다.