[font] CSS - @font-face 구문 - 다운받은 웹폰트적용 (= @font-face쿼리 = 다운글꼴적용 = 웹폰트이름재정의 = 웹폰트정의 = 폰트이름짓기 = 폰트페이스, IE 9)

1. @font-face 예제 - 다운받은 웹폰트 적용
2. @font-face 정의
3. @font-face 구문
4. @font-face 속성
5. @font-face 예제 - 「나눔 바른 고딕」 폰트 적용

@font-face 예제 - 다운받은 웹폰트 적용

 

<style> 

@font-face {

  font-family: hzStyleFont; 

  src: url("./css/font/hz_light.woff"); /* 가는글씨체 웹폰트주소 지정*/

}

 

@font-face {

  font-family: hzStyleFont;

  src: url("./css/font/hz_bold.woff"); /* 굵은글씨체 웹폰트주소 지정*/

  font-weight: bold;

}

 

div {

  font-family: hzStyleFont;

}

</style>

<div>홈짱닷컴 Homzzang.com</div>

 

※ @font-face 쿼리는 여러 개 사용 가능.

※ 브라우저는 "hzStyleFont" 글꼴 지정 텍스트가 굵게 표시 될 때마다 굵은 폰트 정의해 둔 걸 사용. 

@font-face 정의

 

 다운받은 폰트 적용.

 

---

 

1.

이 규칙 사용하면, 웹 디자이너는 더 이상 "웹 안전 (web-safe)" 글꼴 중 하나를 사용할 필요 없음.

2.
웹폰트 다운주소는 반드시 소문자로 기재. (※ 대문자 사용 시 IE에서 에러날 수 있음.)

 

3.

웹폰트는 아래 경로에서 다운 가능.

• https://fonts.google.com/ (로그인 불요)
• https://fonts.adobe.com/ (로그인 필요)

 

 

4.

TTF/OTF 및 WOFF 포맷은 IE9 이상 주요 최신브라우저 모두 지원.

5.
CSS3

 

6.

웹폰트 사용 시 문제점

https://d2.naver.com/helloworld/4969726

 

7.

브라우저 지원 현황 확인.

 

PS.

* Edge 및 IE : 글꼴 형식은 "설치 가능 (installable)" 설정 경우에만 작동.

* Firefox : 기본적으로 비활성화되어 있지만 활성화 가능. (※ WOFF2 사용하려면 플래그를 "true"로 설정)

＊ 파일 로드 빠르기 순서 (= 파일크기 작은 순서): woff2 > woff > ttf > eot > svg

@font-face 구문

 

@font-face {

  font-properties

}

@font-face 속성

@font-face 예제 - 「나눔 바른 고딕」 폰트 적용

@font-face {

    font-family:'Nanum Barun Gothic';

    font-style:normal;

    font-weight:400;

    src:url(/common/font/NanumBarunGothic.eot);

    src:local('Nanum Barun Gothic'),

    local('NanumBarunGothic'),

    url(/common/font/NanumBarunGothic.eot?#iefix) format('embedded-opentype'),

    url(/common/font/NanumBarunGothic.woff2) format('woff2'),

    url(/common/font/NanumBarunGothic.woff) format('woff'),

    url(/common/font/NanumBarunGothic.ttf) format('truetype');

}