Developer/CSS

웹폰트 간단하게 적용하기

jaddong 2022. 9. 4. 17:10
320x100

폰트 확장자

  • opentype : IE6-IE8
  • woff2 : woff보다 더 나은 압축 (IE를 제외한 모든 브라우저에서 사용)
  • woff : W3C 권장 사항 (IE 에서 가능)
  • ttf/otf: 모두에서 가장 일반적인 글꼴 형식

폰트 적용 방법

  • cdn보단 local에서 폰트 파일을 사용하는 것이 렌더 속도를 빠르다.
✔ 초기화 css 파일에 적용
@font-face {
  font-family: 'SpoqaHanSansNeo';
  font-style: normal;
  font-weight: 300;
  src: url("../src/fonts/SpoqaHanSansNeo-Light.woff2") format('woff2'),
  url("../src/fonts/SpoqaHanSansNeo-Light.woff") format('woff'),
  url("../src/fonts/SpoqaHanSansNeo-Light.otf") format('truetype')
}

@font-face {
  font-family: 'SpoqaHanSansNeo';
  font-style: normal;
  font-weight: 400;
  src: url("../src/fonts/SpoqaHanSansNeo-Regular.woff2") format('woff2'),
  url("../src/fonts/SpoqaHanSansNeo-Regular.woff") format('woff'),
  url("../src/fonts/SpoqaHanSansNeo-Regular.otf") format('truetype')
}

@font-face {
  font-family: 'SpoqaHanSansNeo';
  font-style: normal;
  font-weight: 500;
  src: url("../src/fonts/SpoqaHanSansNeo-Medium.woff2") format('woff2'),
  url("../src/fonts/SpoqaHanSansNeo-Medium.woff") format('woff'),
  url("../src/fonts/SpoqaHanSansNeo-Medium.otf") format('truetype')
}

(+) font-weight
100 - Thin
300 - Light
400 - Regular
500 - Medium
700 - Bold

 

 

출처

반응형
저작자표시 (새창열림)