@font-face 및 font-display를 사용하여 CSS에서 사용자 지정 글꼴을 정의하는 방법

소개

@font-face는 맞춤 글꼴을 정의하는 데 사용되는 CSS at-rule입니다. @font-face를 사용하여 CSS 파일과 동일한 서버에서 호스팅되는 글꼴 파일의 경로를 제공합니다. 이 규칙은 꽤 오랫동안 사용되어 왔지만 새로운 수준의 로딩 옵션을 제공하는 새로운 속성인 font-display가 있습니다.

이 자습서에서는 인기 있는 오픈 소스 글꼴인 Roboto Mono를 다운로드하고 @font-face를 사용하여 샘플 웹 페이지에 글꼴을 로드합니다. 최상의 사용자 경험을 만들기 위해 font-display 속성을 사용하여 로드 방법과 시기를 사용자 지정합니다.

전제 조건

nano 또는 Visual Studio Code와 같은 원하는 코드 편집기
웹 브라우저
HTML 기본에 대한 편안함. 소개를 위해 튜토리얼 시리즈 HTML로 웹사이트를 구축하는 방법을 볼 수 있습니다.

1단계 - 글꼴 다운로드 및 웹 페이지 구축

@font-face 규칙 탐색을 시작하기 전에 샘플 웹 페이지와 디렉토리를 설정해 보겠습니다.

작업 디렉토리에서 웹사이트를 위한 새 폴더와 글꼴 파일을 위한 하위 디렉토리를 만듭니다.

mkdir -p ./website/fonts/

새 프로젝트의 루트 디렉토리인 website로 이동합니다.

cd website

여기에서 나머지 모든 명령을 실행합니다.

이제 curl 명령을 사용하여 Roboto Mono 글꼴을 다운로드합니다. 깔끔하게 묶인 단일 GET 요청에서 사용하고 있습니다.

Roboto Mono, regular 및 700italic의 두 가지 스타일과 무게를 다운로드해 보겠습니다.

curl -o ./fonts/fontfiles.zip "https://google-webfonts-helper.herokuapp.com/api/fonts/roboto-mono?download=zip&subsets=latin,latin-ext&variants=regular,700italic&formats=woff,woff2,ttf"

Roboto Mono 글꼴 패밀리에서 원하는 변형을 지정하는 방법에 유의하십시오. 그런 다음 각각에 대해 원하는 형식을 지정합니다. ttf, woff 및 woff2 형식을 요청하고 있습니다. woff2 형식은 가장 현대적인 웹 글꼴 형식이지만 TrueType 형식 또는 ttf입니다. 이것은 우리에게 훌륭한 적용 범위를 제공하지만 CSS를 작성할 때 표준 글꼴을 사용하여 더 많은 대체 옵션을 제공할 것입니다. font-display 속성은 또한 다양한 사용자를 위해 글꼴을 로드하는 방법을 관리하는 데 도움이 됩니다.

이제 ./fonts 폴더에 다운로드한 내용의 압축을 풉니다. Linux 및 macOS를 실행하는 머신에서 다음 명령을 사용합니다.

unzip ./fonts/fontfiles.zip -d ./fonts

./fonts 폴더의 내용을 검사합니다.

ls ./fonts

이제 글꼴당 .ttf, .woff 및 .woff2 파일의 6개의 새 파일을 찾습니다.

다운로드한 글꼴로 CSS를 작성하고 이를 사용하여 HTML 요소의 스타일을 지정해 보겠습니다.

2단계 — @font-face 규칙 사용

이 단계에서는 @font-face 속성을 사용하여 다운로드한 글꼴을 적용합니다.

nano 또는 원하는 텍스트 편집기를 사용하여 style.css라는 파일을 만들고 엽니다.

nano style.css

파일 경로와 함께 @font-face 규칙을 정의할 다음 콘텐츠를 추가합니다.

@font-face {
  font-family: 'Roboto Mono', monospace;
  src: url(fonts/roboto-mono-v12-latin-regular.woff2) format('woff2'),
       url(fonts/roboto-mono-v12-latin-regular.woff) format('woff'),
       url(fonts/roboto-mono-v12-latin-regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Roboto Mono', monospace;
  src: url(fonts/roboto-mono-v12-latin-700italic.woff2) format('woff2'),
       url(fonts/roboto-mono-v12-latin-700italic.woff) format('woff'),
       url(fonts/roboto-mono-v12-latin-700italic.ttf) format('truetype');
  font-weight: 700;
  font-style: italic;
}

h1, p {
  font-family: 'Roboto Mono', monospace;
}

h1 {
  font-family: 'Roboto Mono', monospace;
  font-weight: 700;
  font-style: italic;
}

이 코드를 블록별로 살펴보겠습니다.

항상 기본 CSS 파일에서 먼저 @font-face at-rules를 정의하십시오. @font-face 규칙의 가장 기본적인 버전에는 font-family 및 src 속성이 필요합니다. 첫 번째 블록에서 font-family의 값으로 Roboto Mono를 제공하고 각각 src에 대한 세 파일의 경로를 제공합니다. 형식이 다르고 우선 순위가 내림차순입니다.

두 번째 블록에서는 동일한 font-family 값을 제공하지만 Roboto Mono의 700italic 버전에 대한 경로를 사용합니다. 그런 다음 font-weight 및 font-style의 두 속성을 정의합니다. 이러한 속성을 사용하여 Roboto Mono의 두 번째 버전을 사용할 위치를 정의합니다.

다음 두 블록에서는 <h1> 및 <p> 요소에 대한 사용자 지정 스타일을 정의합니다. font-family를 사용하여 둘 다 정의한 다음 에 특정한 블록에 font-weight 및 font-style을 추가하는 방법에 유의하십시오. <h1>. 이렇게 하면 Roboto Mono regular 대신 Roboto Mono 700italic의 H1 제목이 렌더링됩니다.

파일을 저장하고 닫습니다.

이제 <h1> 및 <p> 태그가 있는 작은 HTML 페이지를 만들어 보겠습니다.

index.html이라는 새 파일을 만들고 엽니다.

nano index.html

제목과 텍스트 줄을 정의하는 다음 코드를 추가합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS @font-face</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1> Roboto Mono font, 700italic </h1>
  <p> Roboto Mono font, regular </p>
</body>
</html>

파일을 저장하고 닫습니다.

웹 브라우저에서 index.html을 로드합니다. 제목은 Roboto Mono 700italic로 렌더링되고 단락 텍스트는 Roboto Mono regular로 다음과 같이 렌더링됩니다.

@font-face 속성이 작동하면 이제 font-display를 사용하여 글꼴이 로드되는 방법과 시기를 구성해 보겠습니다.

3단계 — font-display를 사용하여 글꼴 로드 제어

font-display를 사용하면 글꼴을 로드하는 방법을 정확하게 제어할 수 있습니다. 이것은 사용자 지정 글꼴을 사용할 때 사용자 경험을 크게 향상시킬 수 있습니다.

경우에 따라 사용자 지정 글꼴을 사용할 때 페이지를 처음 로드할 때 FOUT(스타일이 지정되지 않은 텍스트 깜박임) 또는 FOIT(보이지 않는 텍스트 깜박임)가 발생할 수 있습니다. 일부 브라우저는 사용자 지정 글꼴이 로드되지 않은 경우에도 텍스트를 바로 표시하도록 선택합니다. 브라우저는 완전히 로드되면 사용자 지정 글꼴로 되돌아가지만 이로 인해 FOUT이 생성됩니다. 다른 브라우저는 사용자 지정 글꼴이 로드될 때까지 짧은 시간 동안 텍스트를 숨겨 FOIT를 일으킵니다. 해당 기간 동안 글꼴이 로드되지 않으면 브라우저는 대체 글꼴을 사용합니다.

FOUT을 처리하는 한 가지 방법은 Font Style Matcher와 같은 도구를 사용하여 가능한 한 사용자 지정 글꼴에 가까운 대체 글꼴을 찾아 글꼴 변경이 너무 급격하게 느껴지지 않도록 하는 것입니다. 그러나 font-display 속성을 사용하여 이러한 문제를 보다 우아하게 처리할 수 있습니다.

로딩 문제에 대처하기 위해 font-display는 다음 5가지 값 중 하나를 사용합니다.

auto: 브라우저의 기본 동작을 사용하며 이는 다양합니다.
block: 텍스트는 처음에는 짧은 시간 동안 숨겨지지만 사용할 수 있게 되면 사용자 지정 글꼴로 변경됩니다. 이 하나의 값은 무한한 스왑 기간을 갖는다고 합니다.
swap: 텍스트가 숨겨지지 않으며 사용할 수 있게 되면 사용자 지정 글꼴로 변경됩니다. 이것은 또한 무한 스왑 기간을 제공합니다.
대체: 텍스트가 매우 짧은 기간(차단 기간) 동안 숨겨져 있다가 짧은 교체 기간이 있습니다. 맞춤 글꼴이 교체 기간 내에 로드되지 않으면 전혀 로드되지 않습니다.
선택사항: 텍스트를 로드하는 데 매우 짧은 차단 기간(~100ms)이 주어집니다. 해당 차단 기간 동안 글꼴이 로드되지 않으면 대체 글꼴이 사용되며 사용자 지정 글꼴은 전혀 로드되지 않습니다. 그러나 글꼴은 여전히 백그라운드에서 다운로드되고 캐시됩니다. 즉, 후속 페이지 로드 시 맞춤 글꼴이 캐시에서 사용 가능하게 된 다음 즉시 로드됩니다.

font-display의 선택적 값은 많은 글꼴 로드 상황에 대한 강력한 솔루션을 제공합니다. 우리 자신의 CSS에 추가합시다.

style.css 다시 열기:

nano style.css

이제 강조 표시된 코드를 추가합니다.

@font-face {
  font-family: 'Roboto Mono', monospace;
  src: url(fonts/roboto-mono-v12-latin-regular.woff2) format('woff2'),
       url(fonts/roboto-mono-v12-latin-regular.woff) format('woff'),
       url(fonts/roboto-mono-v12-latin-regular.ttf) format('truetype');
  font-display: optional;
}

@font-face {
  font-family: 'Roboto Mono', monospace;
  src: url(fonts/roboto-mono-v12-latin-700italic.woff2) format('woff2'),
       url(fonts/roboto-mono-v12-latin-700italic.woff) format('woff'),
       url(fonts/roboto-mono-v12-latin-700italic.ttf) format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: optional;
}

h1, p {
  font-family: 'Roboto Mono', monospace;
}

h1 {
  font-family: 'Roboto Mono', monospace;
  font-weight: 700;
  font-style: italic;
}

이제 사용자 지정 글꼴이 너무 빨리 로드되어 사용자가 FOUT 또는 FOIT를 경험하지 않거나 전혀 로드되지 않습니다. 그러나 새로고침하거나 더 많은 페이지를 방문하면 여전히 즉시 다운로드 및 로드됩니다.

결론

이 자습서에서는 사용자 지정 글꼴을 다운로드하고 @font-face 속성을 사용하여 웹 페이지에 추가했습니다. 그런 다음 font-display 속성을 사용하여 사용자 지정 글꼴이 로드되는 방식을 관리했습니다. font-display 및 관련 속성에 대해 자세히 알아보려면 Mozilla 개발자 네트워크에서 관련 문서를 살펴보십시오.