웹 폰트의 제공

웹폰트를 사용하려면 웹폰트를 제공하는 방법을 이해해야 합니다. 어도비의 폰트 및 구글 폰트와 같은 타사 서비스를 사용하면 글꼴을 쉽게 포함할 수 있습니다. 원하는 글꼴을 선택하고 HTML 문서에 스타일시트 링크를 복사하여 붙여넣은 다음 CSS에서 글꼴을 참조합니다. 어도비 폰트는 수천 개의 서체에 대한 액세스를 제공하지만 해당 글꼴을 사용하려면 어도비의 구독 서비스를 사용해야만 합니다. 그에 반해 구글 폰트는 오픈 소스 서체만 호스팅하지만 구글은 최종 사용자의 데이터를 수집, 저장 및 사용합니다. 결과적으로 선호하는 방법은 웹사이트와 함께 자체 서버에서 웹폰트를 호스팅하는 것입니다. 유형 파운드리에서 라이선스를 부여하든 오픈 소스를 사용하든 글꼴 파일을 자체 호스팅하면 안정성, 독립성 및 개인 정보를 보호할 수 있습니다. 브라우저가 글꼴 렌더링 방법을 계속 개선함에 따라 자신의 글꼴 파일을 호스팅하는 것이 덜 위협적이 되었습니다.

 

자체 호스팅에 @font-face 규칙을 사용하려면 CSS에서 웹 글꼴을 정의하기만 하면 됩니다.

@font-face {
  font-family: 'Spectral'; 
    src:
      url('spectral-regular.woff2') format('woff2');

 

글꼴 모음

@font-face 규칙에서 font-family 속성은 서체의 이름을 선언합니다. 위의 예에서 프로덕션 유형별 Spectral은 글꼴 이름이고 src 속성은 브라우저에 글꼴 파일(spectral-regular.woff2)의 위치를 ​​알려줍니다.

 

글꼴 형식

오늘날 웹 글꼴에 대해 널리 지원되는 세 가지 형식은 WOFF2(Web Open Font Format 2), WOFF(Web Open Font Format) 및 TTF(TrueType)입니다. 최신 브라우저의 경우 woff에 비해 파일 크기가 30% 감소한 woff2를 제공하는 것이 좋습니다. 이전 브라우저를 지원해야 하는 경우에만 woff 및 truetype을 포함합니다.

@font-face {
  font-family: 'Spectral'; 
    src:
      url('spectral-regular.woff2') format('woff2'),
      url('spectral-regular.woff') format('woff'),
      url('spectral-regular.ttf') format('truetype');
}

 

글꼴 스타일

font-style 속성은 normal, italic 또는 oblique일 수 있는 글꼴 패밀리의 스타일을 지정합니다.

@font-face {
  font-style: normal; 
}

 

글꼴 두께

font-weight 속성은 400 또는 normal, 700 또는 bold, 900 또는 검은색과 같이 숫자 값 또는 키워드로 지정할 수 있는 가중치를 정의합니다. 특정 숫자 값(100–900)을 사용하는 것이 좋습니다.

@font-face {
  font-weight: 400; 
}

 

글꼴 표시

font-display 속성은 서체가 표시되는 방식을 결정합니다: auto, block, fallback, optional, swap. 대부분의 경우 스왑을 사용하여 브라우저에 대체 글꼴로 텍스트를 즉시 표시하고 로드되는 즉시 사용자 정의 글꼴로 바꾸도록 지시하는 것이 좋습니다.

@font-face {
  font-display: swap; 
}

 

웹폰트 사용

글꼴 파일을 정의하면 CSS의 텍스트에 적용할 수 있습니다.

body {	 
  font: 100%/1.5 'Spectral', serif;  	
}

속기 글꼴 속성을 사용하면 글꼴 크기(100%)와 글꼴의 줄 높이(1.5)를 지정할 수 있습니다. 글꼴 이름인 Spectral은 @font-face 선언으로 다시 참조됩니다. Spectral이 완전히 로드되지 않았거나 로드에 실패한 경우 기본 대체 글꼴을 지정하기 위해 키워드 serif가 추가되었습니다.