웹에서 기본 폰트가 적용되어 있지만 특정 페이지에서 다른 폰트를 적용하려고 한다
먼저 폰트 포맷을 살펴보면 TTF, OTF, WOFF, WOFF2 4가지 타입이 있다
Font Format
| 포맷 | 특징 |
| TrueType Fonts (TTF) | 가장 일반적 대부분의 브라우저 |
| OpenType Fonts (OTF) | TTF 기반 TTF에서 지원하지 않는 기능 사용 가능 |
| The Web Open Font Format (WOFF) | OTF와 TTF로 이루어져 있는 압축된 폰트 경량 |
| The Web Open Font Format (WOFF 2.0) | 향상된 WOFF |
*포맷별 지원 가능한 브라우저 및 버전 확인 가능
Font face
사용자가 가지고 있지 않은 폰트를 특정 경로로 연결시켜 다운 받아 사용할 수 있게 정의해 주는 것이다
css 파일에서 정의한다
@font-face {
font-family: 'Gothic';
font-weight: normal;
font-style: normal;
font-display: swap;
src: local('Gothic'),
url('./fonts/Gothic.woff2') format('woff2'),
url('./fonts/Gothic.woff') format('woff'),
url('./fonts/Gothic.ttf') format('truetype');
}
font-family
선언하고자 하는 폰트의 이름을 정의한다
src
폰트가 정의되어 있는 경로를 설정할 수 있다
- local
- url: 포맷별 경로를 설정해 준다 특정 순서를 지켜서 작성한다
src에 작성한 폰트 설치 경로들은 위부터 아래 순서대로 사용자의 브라우저에 부합하는 포맷의 폰트를 다운 받는다
순서대로 다운 받는 중, 사용자의 브라우저에서 지원되는 폰트 포맷을 다운 받게 되면 그때부턴 다운받지 않는다
- local (사용자 환경에서 찾기)
- eot
- woff2/ woff
- ttf
- svg
font-weight (Optional)
정의하고자 하는 font의 weight를 지정한다
normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-style (Optional)
정의하고자 하는 font의 style을 지정한다
normal | italic | oblique
font-display (Optional)
font face가 표시되는 방법을 결정한다
font face가 로드되지 않은 경우 font face를 사용하려는 요소는 (텍스트가 표시되는)대체 폰트를 렌더링한다
auto | block | swap | fallback | optional
@ 페이지에 들어갔는데 기본 폰트->특정 폰트를 로드하면서 버벅임이 생길 경우
HTML에서 preload 마크업을 해 준다
웹 사이트를 방문하면, 필요한 리소스 자원을 서버에 요청할 때 여러 자원을 동시에 요청하고 서버에서는 요청 순서에 상관없이 준비가 되는대로 응답을 하게 된다
이때, 특정 리소스를 빠르게 로딩하도록 우선순위를 부여하는 방법이 바로 Pre Load를 지정하는 방식이다
Head 태그에 빠르게 로딩시킬 파일을 Pre Load로 지정하게 되면, 페이지 요청 시 해당 소스 자원을 우선적으로 로드를 수행한다
<head>
<link rel="preload" href="/assets/fonts/Gothic.woff2" as="font" type="font/woff2" crossorigin>
</head>
type
다양한 유형을 미리 로드할 수 있다
audio |document | embed | fetch | font | image | object | script | style | track | worker | video
https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload
Link types: preload - HTML: HyperText Markup Language | MDN
The preload value of the <link> element's rel attribute lets you declare fetch requests in the HTML's <head>, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main render
developer.mozilla.org
'ETC' 카테고리의 다른 글
| [#. chart] billboard.js 사용해서 그래프 그렸을 때 bar 색상에 gradient 사용하기 (0) | 2022.07.08 |
|---|---|
| [#. ETC] 웹 브라우저에서 URL을 입력했을 때 과정(OSI 7계층) (0) | 2022.05.31 |
| [#. R] package ‘KoNLP’ is not available for this version of R, R 4 version 이상에서 발생하는 문제 해결 (1) | 2022.03.20 |
| [#. Web] HTTP, Web Socket, Web RTC란? (0) | 2022.02.21 |
| [#. ETC] 디자이너 없이 개발할 때 참고하기 유용한 사이트(color, gradient, svg, png, background) (0) | 2022.01.07 |
