728x90
font-family가 body에서 선언이 되어있었다.
* {
box-sizing: border-box;
color: #2e2e2e;
}
html,
body {
padding: 0;
margin: 0;
font-family: Maplestory, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
}
a {
color: inherit;
text-decoration: none;
}
button {
outline: none;
border: none;
background: transparent;
}
@font-face {
font-family: 'Maplestory';
src: url('../../public/fonts/MaplestoryLight.otf') format('opentype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Maplestory';
src: url('../../public/fonts/MaplestoryBold.otf') format('opentype');
font-weight: bold;
font-style: normal;
font-display: swap;
}
참고자료에 따르면 font-face는 *에 선언을 해주는 것이 맞다.
이전에, body에 선언이 되어있을 때 디자인시스템에 폰트가 적용이 되었던 이유는
테일윈드에서 font-family: inherit;
속성을 걸어놨던 것이다.
즉, 문제가 있었는데 테일윈드에 가려져서 문제가 보이지 않았던 것이다.
다음 프로젝트할 때, 폰트 적용은 * 에서 주는 것을 잊지말자!
728x90