웹폰트 사용법

Code/Web 2019. 1. 27. 01:18

웹폰트 사용법


//=============================
* 웹 폰트 형식(포멧 종류)과 브라우저 지원
https://www.w3schools.com/css/css3_fonts.asp
    - 모든 브라우저가 지원하는 포맷은 TTF/OTF, WOFF



WOFF(Web Open Font Format)   <====
    OTF/TTF 를 이용한 구조의 압축된 버전으로, 다른 글꼴 형식보다 빠르게 로드   

- 모든 브라우저가 지원


SVG/SVGZ (Scalable Vector Graphics (Font)
    *SVGZ는 SVG의 압축된 버전


EOT(Embedded Open Type)   
    - IE 6 이하만 지원

OTF(OpenType Font) / TTF(TrueType Font)
   



//================================
구글 웹폰트 사용
https://fonts.google.com/?subset=korean
    - 사이트에서 폰트 선택해서 링크 생성

예) 나눔 고딕의 경우
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic" rel="stylesheet">

.fon-nago{
font-family: 'Nanum Gothic', sans-serif;
}

<p class="fon-nago"> test </p>


//================================
font-family:  arial, 나눔고딕, 맑은고딕;
    - 처음 부터 검색해서 먼저 나오는 로컬 폰트를 사용

- 영문 전용 폰트가 먼저 나오면 영문은 영문 전용 폰트로 표시 됨


//=============
@font-face
    온라인 폰트 불러오기

@font-face {
    font-family: "loc-fon";
    src: local(나눔고딕),local(맑은고딕);
    font-weight: normal;
    unicode-range: U+0-10FFFF;
}



//================================
// 참고
폰트
https://wit.nts-corp.com/2017/02/13/4258


반응형
Posted by codens