728x90
src폴더 내 불필요한 파일들을 싹 지운다.
blog template 은 https://www.figma.com/file/NVMJZa2R2iULZ92VeJ5nMJ/%F0%9F%8C%8E-Free-Blog-Template-Design-(Community)?node-id=118%3A1909 의 템플릿을 사용하도록 한다.
woff font 만들기
먼저 위 템플릿의 font는 전부 PlusJakartaSans font family를 사용중에 있다.
woff 파일들의 로컬설치를 위해 먼저 PlusJakartaSans otf파일을 설치 받았다. (OTF에 비해 WOFF가 압축률이 높은 이득이 있다.)
이후 웹에서 woff로의 변환을 하였다. 그러면 woff와 woff2가 생성이 된다.
woff2는 woff의 차세대 버전으로 압축률이 높은 장점이 있지만 woff에 비해 브라우저 호환률이 떨어진다는 단점이 있다.
font 적용하기
assets 폴더안에 다음과 같이 font전용 폴더를 생성해준다.
stylesheet.css에서는 위의 font를 import하여 브라우저에서 해당 font가 사용될 수 있도록 설정한다.
/* stylesheet.css */
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('./woff2/plusjakartadisplay-bold-webfont.woff2') format('woff2'),
url('./woff/plusjakartadisplay-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('./woff2/plusjakartadisplay-bolditalic-webfont.woff2') format('woff2'),
url('./woff/plusjakartadisplay-bolditalic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('./woff2/plusjakartadisplay-italic-webfont.woff2') format('woff2'),
url('./woff/plusjakartadisplay-italic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('./woff2/plusjakartadisplay-light-webfont.woff2') format('woff2'),
url('./woff/plusjakartadisplay-light-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
...이 stylesheet를 해당 font를 사용할 js또는 css 에 import하면 Plus Jakarta Sans local로 import한 font를 사용할 수 있다. (위의 상황에서는 overloading으로 마지막에 import한 font가 Plus Jakarta Sans로 적용된다.)