font-face 웹폰트 적용 eot, woff, otf/ttf

 

 

@font-face는 사용자 컴퓨터에 폰트가 설치 되어있지 않아도 서버에서 내려받아서 사용할 수있는 방법입니다.

 

폰트에대한 설명과 웹폰트로 변환하는 방법은 아래 포스팅을 참고해 주세요

https://moo-you.tistory.com/55

ttf폰트 직접 웹폰트 업로드해 사용하기

 

폰트마다 지원하는 브라우저가 다르다보니 다양한 탕입들의 글꼴들을 업로드 해줘야 합니다.

 

@font-face 작성형식

@font-face{
  font-family:"폰트이름";
  src:local("폰트이름1"), local("폰트이름2"), url("폰트주소") format("폰트포맷");
}

여기서 local은 사용자 컴퓨텉에 폰트이름1이 설치되 어있으면 그걸 사용하고 없으면 폰트이름2를 사용 그 마저도 없으면 url에 있는 폰트주소에서 다우낟아서 사용하라는 의미 입니다.

 

폰트 포맷은 아래 표를 참고하세요

폰트 확장자명	폰트포맷
폰트명.woff	woff
폰트명.eot	embedded-opentype
폰트명.woff	woff2
폰트명.otf	opentype
폰트명.svg	svg

 

IE6~8버전의 경우 format()을 인식하지 못해서 다른 url로 된 파일도 다운 받기 때문에 이것을 방지하기 위해서 eot파일 이름 뒤에 ?#iefix를 삽입합니다. 여기서 ?는 ie가 문자열의 나머지를 주소 일부분으로 생각하도록 만들어서 이후 문자를 번역해서 다운받는것을 막는 역학을 합니다.

그렇기 때문에 익스플로러 구버전은 eot만 내려받게 됩니다.

 

아래와 @font-face를 등록할 수 있습니다.

/* Noto Sans KR (korean) http://www.google.com/fonts/earlyaccess */
 
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 100; 
  src: url(/fonts/NotoSansKr/NotoSansKR-Thin.eot?#iefix') format('embedded-opentype'),
        url(/fonts/NotoSansKr/NotoSansKR-Thin.woff2) format('woff2'),
        url(/fonts/NotoSansKr/NotoSansKR-Thin.woff) format('woff'),
        url(/fonts/NotoSansKr/NotoSansKR-Thin.otf) format('opentype');	
       
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 300;
  src: url(/fonts/NotoSansKr/NotoSansKR-Light.eot?#iefix') format('embedded-opentype'),
  	   url(/fonts/NotoSansKr/NotoSansKR-Light.woff2) format('woff2'),
       url(/fonts/NotoSansKr/NotoSansKR-Light.woff) format('woff'),
       url(/fonts/NotoSansKr/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 400;
   src: url(/fonts/NotoSansKr/NotoSansKR-Regular.eot?#iefix') format('embedded-opentype'),
   		url(/fonts/NotoSansKr/NotoSansKR-Regular.woff2) format('woff2'),
        url(/fonts/NotoSansKr/NotoSansKR-Regular.woff) format('woff'),
        url(/fonts/NotoSansKr/NotoSansKR-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 500;
   src: url(/fonts/NotoSansKr/NotoSansKR-Medium.eot?#iefix') format('embedded-opentype'),
   		url(/fonts/NotoSansKr/NotoSansKR-Medium.woff2) format('woff2'),
        url(/fonts/NotoSansKr/NotoSansKR-Medium.woff) format('woff'),
        url(/fonts/NotoSansKr/NotoSansKR-Medium.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 700;
   src: url(/fonts/NotoSansKr/NotoSansKR-Bold.eot?#iefix') format('embedded-opentype'),
   		url(/fonts/NotoSansKr/NotoSansKR-Bold.woff2) format('woff2'),
        url(/fonts/NotoSansKr/NotoSansKR-Bold.woff) format('woff'),
        url(/fonts/NotoSansKr/NotoSansKR-Bold.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 900;
   src: url(/fonts/NotoSansKr/NotoSansKR-Black.eot?#iefix') format('embedded-opentype'),
   		url(/fonts/NotoSansKr/NotoSansKR-Black.woff2) format('woff2'),
        url(/fonts/NotoSansKr/NotoSansKR-Black.woff) format('woff'),
        url(/fonts/NotoSansKr/NotoSansKR-Black.otf) format('opentype');
 }

 

사용할때는 아래와 같이 사용하면 됩니다.

body {
 font-family: 'Noto Sans KR';
}

 

주의 할 점은 font-face를 사용할 경우 웹사이트 속도가 느려질 수도 있습니다.

그래서 폰트를 경량화 시키거나 font-style과 font-weight를 줄이고 character set을 가볍게하거나

꼭 크로스브라우징을 지킬 필요가 없다면 해당되는 브라우저에 맞는 폰트만 올려서 속도가 저하되는걸 완화시킬수도 있습니다.