스타일컴포넌트 - 폰트 적용하기

App.css는 바로 import로 적용해오는 방식이 됐는데, 스타일컴포넌트는 조금 다르게 설정해야함.

 

cdn으로 불러올거면 reset.css에 적어준 createGlobalStyle안에 적어준다.

 

 

이와 같이 같은 곳에 body{ 폰트명 } 적어주면 전체 페이지에 적용되는 내용을 확인할 수 있음.

 

 

 

다운로드 받아서 쓸때

fonts폴더안에 이름아무거나.jsx를 만들고 작성함.

import 작성해서 불러와줌

createGlobalStyle로 적어줘야함 앞에 변수선언은 이름자유

 

 

 

 

export default createGlobalStyle` 
@font-face {
        font-family: "Roboto";
        src: url(${RobotoWoff}) format("woff"),
            url(${RobotoWoff2}) format("woff2"),
            url(${RobotoTtf}) format("truetype");
    }
`;

글로벌 스타일 지정해줌.

 

 

 

 

최상단 index.js로 가서  import 해준다.