[토이프로젝트] Styled-Component에서 구글 폰트 사용하기

# 트러블 슈팅

- styled component를 공부하면서 개발하고 있어서 구글 폰트 적용할 때는 어떻게 해야하는지 몰랐다

 

# 해결 방법

- global 파일을 만들어 적용해보라는 말도 있었지만 그렇게 개발해보니 폰트 적용이 전혀 안됐다.

- 두번째 방법으로 index.css 파일을 만들어 그 안에 구글 폰트를 적용하는 방식이 있었는데, 전반적으로 폰트를 사용할 수 있게 되었다.

- @font-face로 폰트를 정의하면 font-family로 어떤 파일이든 그 폰트를 사용할 수 있게 된다.

// index.css 

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500&display=swap');


@font-face {
  font-family: 'Roboto', sans-serif;
  src: url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300;1,400;1,500&display=swap')
    format("woff");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+0041-005A, U+0061-007A;
}

@font-face {
  font-family: 'Noto Sans KR', sans-serif;
  src: url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500&display=swap')
    format("woff");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+AC00-U+D7A3;
}