웹폰트

장돌뱅이 ·2022년 1월 1일

CSS

목록 보기

14/18

모든 브라우저에서 지원하는 웹 세이프 폰트를 이용할 수 있지만

무료 폰트 서비스(Google Fonts, https://fonts.google.com/ 참조 / Adobe Fonts, https://fonts.adobe.com/)를 이용할 수도 있다. 또한 https://www.fonts.com/ 에서 폰트를 구입하여 사용할 수 있다.

head 안에<link> 요소를 사용하거나 css파일 안에 import한다(head: 해당 웹페이지의 정보를 알려주는 메타데이터들과 여러 참조링크 포함)
스타일시트에 font-family 속성을 이용하여 폰트 적용

<link>요소를 사용하는 대신 스타일시트 안에 @font-face 룰셋을 만들어 사용할 수도 있다.
폰트는 다음과 같은 다양한 포맷으로 다운받아질 수 있다.
OTF (OpenType Font)
TTF (TrueType Font)
WOFF (Web Open Font Format)
WOFF2 (Web Open Font Format 2)

** WOFF, WOFF2 지원 툴 (https://google-webfonts-helper.herokuapp.com/fonts 참조)

@font-face { 
  font-family: 'MyParagraphFont';
  src: url('fonts/Roboto.woff2') format('woff2'),
       url('fonts/Roboto.woff') format('woff'),
       url('fonts/Roboto.ttf') format('truetype');
}

@font-face가 선택자로써 세팅되었다. 스타일시트 맨위에 @font-face 룰셋을 정의해 놓는것을 추천한다.
선언블록 안에 font-family 속성이 다운로드된 폰트를 구현하기 위해 사용되었다. 폰트 이름은 어떤것이든 상관없지만 '' 안에서 입력되어야만 한다.
src 속성은 세가지 값을 갖는다. 각각 상대적인 경로와 폰트 포맷을 의미한다. 위의 예시는 이름이 fonts인 파일 안에 있는 파일 이름이 Roboto라는 폰트를 가져왔으며 폰트 포맷은 ttf이다.
이렇게 폰트페이스가 정의되면 각 요소에 폰트를 적용시킬 수 있다.