styled-components 웹폰트 적용하기

강의에서는
styled-components안에
@import를 사용해 폰트를 적용시켰다
그리고 stylelint를 돌려보니 에러가 발생했다

const GlobalStyles = createGlobalStyle`
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
`;

무슨 에러인가 찾아보자

Any @import rules must precede all other valid at-rules and style rules in a stylesheet (ignoring @charset and @layer), or else the @import rule is invalid.
출처 - no-invalid-position-at-import-rule

그니까 createGlobalStyle보다 상위에 있어야 한다는 말인데
파일 확장자가.js라 또 다른 에러가 난다
그리고 styled-components에서도 권장하지 않고
index.html을 사용하라고 한다

NOTE: At this time we recommend not using @import inside of createGlobalStyle. We're working on better behavior for this functionality but it just doesn't really work at the moment and it's better if you just embed these imports in your HTML index file, etc.
출처

하지만 나는 styled-components를 사용해 폰트를 적용하고 싶다!
그래서 @font-face로 적용!

CSS at-rule 인 @font-face 를 사용하여 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있다. @font-face 를 사용하여 웹페이지 제작자가 원하는 폰트를 사용할 수 있게함으로써, 컴퓨터에 설치된 폰트만을 사용해야했던 제약이 없어지게되었다.

format값을 명시적으로 작성하면
이 형식을 지원하는 브라우저만 폰트를 내려받게 되어 있다고 한다

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

오오 적용이 잘 된다