개발

DS 내 children 폰트 적용이 안될 때

썽연 2022. 6. 29. 18:33
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