next - font를 글로벌 처리할 때 문제점

 

const styleSheets = Array.from(document.styleSheets);
for (let style of styleSheets) {
   if (style instanceof CSSStyleSheet && style.cssRules) { // crash
      ... // do something with the CSS rules of each style sheet
   }
}

 

이러한 에러가 계속 떠서 구글링 해보았다.

 

문제 원인

4bit용 크롬에서만 해당 증상이 나타난다.

 

문제 해결

폰트 파일을 다운 받아서 내부에서 해결하자. 

 

1) public/fonts 경로에 font 파일을 넣어준다.

2) global 파일에 폰트 작성 

body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, InkLipquid, sans-serif;
}

@font-face {
  font-family: "InkLipquid";
  font-weight: 200;
  src: url("/fonts/InkLipquidFonts.ttf") format("truetype");
}

 

 

 

출처

https://damduck01.com/546

css error: Uncaught DOMException 에러 해결 방법을 찾아봤습니다.

 

https://beuracle77.tistory.com/12

nextjs에서 global font 적용하기