SEOGUN
웹 폰트를 페이지가 로딩되었을때
먼저 로드 될 수 있도록 하는 방법에 대해 알아보겠습니다.
글꼴 미리 로드
웹사이트에서 웹 폰트 로딩 여부에 관계없이 텍스트가 항상 보이게 되는데 글꼴, 자간, 높이 등의 서식에 따라 웹 폰트 적용 전과 후의 레이아웃이 변경되게 됩니다. 즉 폰트를 넣었지만, 로딩 시에는 그 폰트가 먼저 로딩이 되지 않기 때문에 레이아웃이 변경되어 UI에 부정적인 경험을 주게 되는 것이죠.
FOUT1을 방지하기 위해 필요한 글꼴을 미리 로드할 수 있습니다. Html <head>부분에 link 요소를 추가하면 됩니다.
만약 customFont.woff2라는 글꼴이 웹에 업로드되어있고, 이것을 우선 로드하게 하려면 다음과 같이 코드를 작성할 수 있습니다.
<head>
<link rel="preload" href="./images/customFont.woff2" as="font" type="font/woff2" crossorigin>
</head>as="font" type="font/woff2" 속성은 브라우저에 이 리소스를 글꼴로 다운로드하도록 지시하고 리소스 대기열의 우선순위를 지정하는 데 도움이 됩니다.
crossorigin 속성은 글꼴이 다른 도메인(웹 폰트)에서 올 수 있으므로 CORS 요청으로 리소스를 가져와야 하는지 여부를 나타냅니다.
이렇게 하면 브라우저는 이 파일을 더 일찍 다운로드해야 한다는 것을 알게 되고, 실행하게 됩니다.
이것을 남용하게 되면 사전 로드가 사용되지 않는 리소스에 대해 불필요한 요청을 하여 성능을 저하시킬 수 있다는 단점이 있습니다. 그러니 꼭 필요한 부분에서만 적용시켜야 합니다.
오늘은 이렇게 웹 폰트를 페이지가 로딩되었을때 먼저 로드 될 수 있도록 하는 방법에 대해 알아보았습니다.
읽어주셔서 감사합니다🤟
- FOUC는 외부의 CSS가 불러오기 전에 잠시 스타일이 적용되지 않은 웹 페이지가 나타나는 현상이다. 이 현상은 스타일이 적용되지 않은 웹 페이지가 스타일이 적용된 웹 페이지로 변화하는 것이다. [본문으로]
'FRONT-END > HTML' 카테고리의 다른 글
| [HTML] Input 내용 버튼 클릭 삭제 (3) | 2022.09.08 |
|---|---|
| [HTML] Block태그와 Inline 태그 종류와 차이점 (0) | 2022.09.05 |
| [HTML #8] 표 table, tbody, tr, td, thead, caption (2) | 2022.07.24 |
| [HTML #7] 이미지 img (src를 CSS로 대체 하는 방법) (4) | 2022.07.24 |
| [HTML #6] 새로운 게시글 만들기 a, html (2) | 2022.07.24 |
GitHub 
Seogun.blog 
Email 
한국어 (기본)
English
Русский
日本語
