폰트를 preload하는 방법
preload란?
폰트 preload는 웹 페이지가 로드될 때 폰트 파일을 사전에 불러와서 페이지가 표시될 때 폰트 파일의 다운로드와 렌더링 시간을 줄이는 기술입니다. 이를 통해 사용자는 페이지가 더 빠르게 로드되고 텍스트가 보다 빠르게 표시됩니다.
preload해보기
<link rel="preload" href="your-font.woff2" as="font" type="font/woff2" crossorigin>위의 코드와 같이 link 태그의 rel 속성을 사용하여 preload가 가능하다. 어디서 사용하는지는 진행 중이 미션과제나, 나중에 취업할때 디자이너가 원하는 폰트로 수정해줄 때 사용할 것이다.
웹 폰트 최적화하기
웹 폰트는 사용자의 로컬 컴퓨터가 아닌 임의의 온라인에서 사용하는, 서버에 저장되어있는 폰트를 다운 받아 화면에 표시해주는 것입니다.
웹 폰트 최적화하는 방법!!
이번 블로그를 작성하면서 여러 블로그를 확인해보면서 가장 정리가 잘 되어있는 블로그를 소개해드리겠습니다. 약 7~8개의 방법이 있는데 위의 preload 방법도 포함되어 있으니 꼭 읽어보시길 추천드립니다. 웹폰트 최적화 하기!! <- 눌러보시죠 ㅎㅎ
로컬 폰트 사용하기!
- 우리가 배운 css의 font-face 방법을 사용한다면 로컬 폰트를 로드하고 사용할 수 있습니다!
@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
이런식으로 사용하여 로컬 폰트를 로드할 수 있습니다.
사용법에 대해 더 공부하실 분들은 모질라 사이트에서 확인해보시기 바랍니다.
@font-face
2. 안 좋은 방식이지만 html에서 바로 style 태그로 지정해주는 것입니다.
style
@font-face {
font-family: 'Font';
src: local('Font'), url('fonts/MyCustomFont.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}
body {
font-family: 'My Custom Font', sans-serif;
}
/style
여기서 스타일을 태그로만 변경한다면 로드할 수 있을 것입니다.
