Font 적용 방법

폰트를 preload 하는 방법

1. link 태그에 preload 속성 추가

<link rel="preload" href="/path/to/font.woff2" as="font" type="font/woff2" crossorigin>

2. CSS @font-face 규칙에 font-display: swap 추가

@font-face {
  font-family: 'MyFont';
  src: url('/path/to/font.woff2') format('woff2');
  font-display: swap;
}

위 두 가지 방법을 사용하여 브라우저가 페이지 로드 중에 폰트 파일을 미리 가져오도록 지시합니다. 이를 통해 페이지 로드 시간을 줄이고 사용자 경험을 향상시킬 수 있습니다. 또한, font-display: swap 규칙을 추가하여 폰트가 로드될 때 사용 가능하도록 처리합니다.

로컬 폰트를 사용하는 방법

1. CSS @font-face 규칙 사용

@font-face {
  font-family: 'MyFont';
  src: local('My Font'), url('/path/to/font.woff2') format('woff2');
}

위의 CSS 규칙에서 src 속성에서 local() 함수를 사용하여 로컬 폰트를 지정할 수 있습니다. local() 함수에는 로컬 시스템에서 사용할 수 있는 폰트 이름을 지정합니다. 폰트 이름은 운영체제나 브라우저에 따라 다를 수 있습니다.

2. HTML style 속성 사용

<div style="font-family: 'My Font', sans-serif;">Hello, world!</div>

위의 HTML 코드에서 style 속성을 사용하여 폰트를 지정할 수 있습니다. 이때 font-family 속성에 로컬 폰트의 이름을 지정합니다.

로컬 폰트를 사용하면 폰트 파일을 다운로드할 필요가 없으므로 페이지 로드 속도를 높일 수 있지만, 모든 사용자의 시스템에서 로컬 폰트가 사용이 가능하지는 않을 수 있으므로, 대안 폰트를 지정해줘야 합니다.

웹 폰트만 로딩하는 최적화 기법

1. 필요한 폰트만 로드하기

웹 페이지에서 사용하는 모든 폰트를 불러오는 것은 페이지 로딩 시간을 늘릴 수 있습니다. 필요한 폰트만 로드하여 페이지 로딩 시간을 줄일 수 있습니다. 예를 들어, 웹 페이지의 제목에만 사용하는 폰트는 다른 폰트와 별도로 로드하는 것이 좋습니다.

2. 웹 폰트의 파일 크기 줄이기

웹 폰트의 파일 크기를 줄이면 폰트 파일을 다운로드하는 시간을 줄일 수 있습니다. 이를 위해 웹 폰트의 압축 파일을 사용하거나, 서브셋(subset) 폰트를 사용하여 필요한 문자만 포함하는 방법이 있습니다.

3. 캐시 활용하기

웹 페이지에서 사용하는 웹 폰트를 한 번 로드하면, 브라우저는 이를 캐시에 저장합니다. 이후 같은 폰트를 사용하는 페이지에서는 캐시된 폰트를 사용하므로, 폰트 파일을 다시 다운로드하지 않아도 됩니다. 이를 통해 페이지 로딩 시간을 줄일 수 있습니다.

4. 로딩 순서 최적화하기

웹 폰트의 로딩 순서를 최적화하여 페이지 로딩 속도를 향상시킬 수 있습니다. 예를 들어, 웹 페이지에서 사용하는 기본 폰트가 로드된 후에 웹 폰트를 로드하는 것이 좋습니다. 이를 위해, @font-face 규칙에서 font-display 속성을 사용하여 폰트의 로딩 방식을 지정할 수 있습니다.