웹폰트 사용하기 / @font-face

웹폰트 사용하기

@font-face : 사용자 컴퓨터에 폰트가 설치 되어있지 않아도 서버에서 내려받아서 사용할 수있는 방법

 

@font-face 설정하기

@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 900;
    src: local('Pretendard Black'), local('Pretendard-Black'),
        url(../fonts/Pretendard-Black.woff) format('woff');
  }
  
  @font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 800;
    src: local('Pretendard ExtraBold'), local('Pretendard-ExtraBold'),
        url(../fonts/Pretendard-ExtraBold.woff) format('woff');
  }
  
  @font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 800;
    src: local('Pretendard ExtraBold'), local('Pretendard-ExtraBold'),
        url(../fonts/Pretendard-ExtraBold.woff) format('woff');
  }
  
  @font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    src: local('Pretendard Bold'), local('Pretendard-Bold'),
        url(../fonts/Pretendard-Bold.woff) format('woff');
  }
  
  @font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 600;
    src: local('Pretendard SemiBold'), local('Pretendard-SemiBold'),
        url(../fonts/Pretendard-SemiBold.woff) format('woff');
  }
  
  @font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    src: local('Pretendard Medium'), local('Pretendard-Medium'),
        url(../fonts/Pretendard-Medium.woff) format('woff');
  }
  
  @font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    src: local('Pretendard Regular'), local('Pretendard-Regular'),
        url(../fonts/Pretendard-Regular.woff) format('woff');
  }
  
  @font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 300;
    src: local('Pretendard Light'), local('Pretendard-Light'),
        url(../fonts/Pretendard-Light.woff) format('woff');
  }
  
  @font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 200;
    src: local('Pretendard ExtraLight'), local('Pretendard-ExtraLight'),
        url(../fonts/Pretendard-ExtraLight.woff) format('woff');
  }
  
  @font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 100;
    src: local('Pretendard Thin'), local('Pretendard-Thin'),
        url(../fonts/Pretendard-Thin.woff) format('woff');
  }

 

사용법

body {
 font-family: 'Pretendard';
}

 

많이 사용하는 웹폰트 종류

 

TTF(True Type Font)

- 애플과 마이크로소프트가 고안한 벡터 글꼴 포맷

- 가장 일반적인 글꼴 형식
- 대부분의 브라우저가 지원

 

OTF(Open Type Font)

- 어도비와 마이크로소프트가 협력해서 만든 TTF의 개선판

- TTF와 비슷하지만, TTF에서 지원하지 않는 최신 기능을 사용 가능

 

WOFF(Web Open Font Format)

- OTF와 TTF로 이루어져 있는 압축된 글꼴 형식
- 압축되어 있어 가볍고 다운 받는 속도가 빠름
- W3C 권장 사항

 

참고

https://www.w3schools.com/css/css3_fonts.asp