[웹폰트] 홈페이지 적용하기 > 기술자료

• 목록
• 게시판 리스트 옵션
  • 검색

@font-face 는 클라이언트의 컴퓨터에 지정된 폰트가 없는 경우 웹폰트를 보여지도록 해줍니다.

ttf 파일과 eot 파일을 함께 준비합니다.
비 IE 브라우저는 ttf 포맷과 otf 포멧을 지원하지만 eot 포멧을 지원하지 않습니다.
반면 IE 브러우저는 eot 포멧을 지원하기 때문에 두 가지 포맷이 모두 필요합니다.
나눔고딕 글골을 이미 설치한 사용자는 웹 폰트를 내려받지 않고 로컬 글꼴을 사용할 수 있도록 NanumGothic 을 먼저 선언합니다.
한국어 글꼴인 경우 오페라 브러우저는 font-family 이름에 반드시 한글을 사용해야 합니다.

@font-face 규칙은 CSS3에 새로 추가된 웹 글꼴 명세입니다.
표시하려고 하는 글꼴이 시스템에 없는 경우 웹 서버에서 글꼴을 내려받아 화면에 표시해 주는 방법인데요.
마이크로소프트가 독자적으로 IE 6~8 브라우저에 지원하던 명세였는데 W3C에 제안하여 현재 CSS3 표준 초안이 되었습니다.
그러나 현실에서 사용하려면 다음과 같은 몇 가지 문제를 확실히 알고 있어야 합니다.

• IE 6~8 브라우저는 *.eot 형식의 글꼴만 지원합니다.
    하지만 W3C가 권장하는 형식은 *.woff 입니다.
    IE 9 브라우저는 *.eot 형식과 *.woff 글꼴을 모두 지원합니다.
• Chrome, Safari, Firefox, Opera 최신 버전 브라우저는 *.woff 형식을 지원하지만 *.eot 형식은 지원하지 않습니다.
    결국 모든 브라우저를 지원하기 위해 *.woff 형식과 *.eot 형식을 함께 준비해야 합니다.
• 표준과 비표준 글꼴을 모두 지원하기 위해 @font-face 규칙을 두 번 사용하는 경우 IE 6~9 브라우저는 *.woff 형식과 *.eot 형식을 모두 내려받아 성능에 좋지 않은 영향을 줍니다.
• @media 구문 안쪽에서 @font-face 규칙을 사용하는 경우 IE 9 브라우저는 글꼴을 요청하지 않습니다.


<style>
@font-face{
 font-family:ng;
 src:url(NanumGothic.eot);
 src:local(※), url(NanumGothic.woff) format('woff')
}
body { font-family:나눔고딕, NanumGothic, ng }
</style>

IE 9 전용 코드를 별도의 외부 파일로 분리
<!--[if IE 9]>
<link rel="stylesheet" href="ie9fix.css" />
<![endif]-->


웹폰트 이용하기
< 방법1 >
/* 스타일시트에 삽입*/
@import url('https://fonts.googleapis.com/css?family=Oswald);  /*  font-family: 'Oswald'  */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');  /*  font-family: 'Noto Sans'  *//* Latin, Cyrillic and Greek */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');  /*  font-family: 'Noto Sans KR'  *//* Korean, 한국어 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');  /*  font-family: 'Noto Sans JP'  *//* Japanese, 일본어 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100;200;300;400;500;600;700;800;900&display=swap');  /*  font-family: 'Noto Sans JP'  *//* Tai, 태국어 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap')  /*  font-family: 'Noto Sans TC'  *//* 중국어 번체 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap');  /*  font-family: 'Noto Sans SC'  *//* 중국어 간체 */

@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap'); /*  font-family: 'Nanum Gothic', '나눔고딕'  */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap'); /*  font-family: 'Nanum Myeongjo', '나눔명조'  */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400;700&display=swap'); /*  font-family: 'Nanum Gothic Coding', '나눔고딕코딩'  */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap'); /*  font-family: 'Nanum Pen Script', '나눔손글씨 펜'  */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap');  /*  font-family: 'Nanum Brush Script', '나눔손글씨 붓'  */

@import url('https://fonts.googleapis.com/earlyaccess/hanna.css'); /*  font-family: 'Hanna', '배달의민족 한나'  */
@import url('https://fonts.googleapis.com/earlyaccess/jejugothic.css'); /*  font-family: 'Jeju Gothic', '제주고딕'  *?
@import url('https://fonts.googleapis.com/earlyaccess/jejuhallasan.css'); /*  font-family: 'Jeju Hallasan', '제주한라산'  */
@import url('https://fonts.googleapis.com/earlyaccess/jejumyeongjo.css'); /*  font-family: 'Jeju Myeongjo', '제주명조'  */
@import url('https://fonts.googleapis.com/earlyaccess/kopubbatang.css'); /*  font-family: 'KoPub Batang', 'KoPub바탕체'  */

@import url('https://cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothic.css'); /* font-family: 'Nanum Barun Gothic', '나눔바른고딕' */
@import url('https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css'); /*  font-family: 'Spoqa Han Sans'  */
@import url('https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-jp.css'); /*  font-family: 'Spoqa Han Sans JP'  */



<방법2>
/*
 * Nanum Gothic (Korean) http://www.google.com/fonts/earlyaccess
 */
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 400;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Regular.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Regular.woff2) format('woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Regular.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 700;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Bold.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Bold.woff2) format('woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Bold.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Bold.ttf) format('truetype');
}
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 800;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-ExtraBold.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-ExtraBold.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-ExtraBold.woff2) format('woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-ExtraBold.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-ExtraBold.ttf) format('truetype');
}


참고자료
http://pangsan.tistory.com/102
http://eunhwak.egloos.com/4388922
http://fontface.kr
http://www.google.com/fonts/earlyaccess
http://webappscon.com/html5/video/?code=3-html5-css3
http://naradesign.net/wp/2012/06/19/1830/
http://wooreeweb.com/lecture/archives/1509