웹폰트 간단하게 적용하기

폰트 확장자

• 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

 

 

출처

• https://d2.naver.com/helloworld/4969726
• https://han7096.medium.com/%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-%EC%9B%B9%ED%8F%B0%ED%8A%B8-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-c892bfda345c
• https://www.w3schools.com/Css/css3_fonts.asp