1. issue
nextjs와 antd를 사용하는 환경이고 antd-custom.less로 antd less를 customize하는 파일 안에 local server에 있는 font를 로드했다.
pages/antd-custom.less
@primary-color: #348fe2;
@font-family: 'OpenSans-Regular';
@font-face {
font-family: 'OpenSans-Light';
src: url('/assets/fonts/OpenSans-Light.ttf') format('ttf'), url('/assets/fonts/OpenSans-Light.ttf') format('ttf'),
url('/assets/fonts/OpenSans-Light.ttf') format('truetype');
}
@font-face {
font-family: 'OpenSans-Regular';
src: url('/assets/fonts/OpenSans-Regular.ttf') format('ttf'), url('/assets/fonts/OpenSans-Regular.ttf') format('ttf'),
url('/assets/fonts/OpenSans-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'OpenSans-SemiBold';
src: url('/assets/fonts/OpenSans-SemiBold.ttf') format('ttf'),
url('/assets/fonts/OpenSans-SemiBold.ttf') format('ttf'),
url('/assets/fonts/OpenSans-SemiBold.ttf') format('truetype');
}
@font-face {
font-family: 'OpenSans-Bold';
src: url('/assets/fonts/OpenSans-Bold.ttf') format('ttf'), url('/assets/fonts/OpenSans-Bold.ttf') format('ttf'),
url('/assets/fonts/OpenSans-Bold.ttf') format('truetype');
}
그랬더니 빌드 후 새로운 페이지로 넘어갈 때마다 폰트 파일이 중복해서 로드되는 문제가 발생했다.
.png)
2. solution
/public/assets/fonts/style.css를 만들어 폰트 파일을 불러오고 이 style.css를 _document.tsx에서 link로 불러오니 한번만 폰트 파일이 로드되었다.
/public/assets/fonts/style.css
@font-face {
font-family: 'OpenSans-Light';
src: url('OpenSans-Light.ttf') format('ttf'), url('OpenSans-Light.ttf') format('ttf'),
url('OpenSans-Light.ttf') format('truetype');
}
@font-face {
font-family: 'OpenSans-Regular';
src: url('OpenSans-Regular.ttf') format('ttf'), url('OpenSans-Regular.ttf') format('ttf'),
url('OpenSans-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'OpenSans-SemiBold';
src: url('OpenSans-SemiBold.ttf') format('ttf'), url('OpenSans-SemiBold.ttf') format('ttf'),
url('OpenSans-SemiBold.ttf') format('truetype');
}
@font-face {
font-family: 'OpenSans-Bold';
src: url('OpenSans-Bold.ttf') format('ttf'), url('OpenSans-Bold.ttf') format('ttf'),
url('OpenSans-Bold.ttf') format('truetype');
}
/pages/_document.tsx
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
export default class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link href="/assets/fonts/style.css" rel="stylesheet" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
https://nextjs.org/docs/basic-features/font-optimization
https://stackoverflow.com/questions/61909298/how-to-use-self-hosted-fonts-face-using-nextjs
바꿀 수 있는 것에 주목하자