본문 바로가기
IT지식

[scss]Font적용 하는 법(React)

by cocogugu 2023. 11. 9.
반응형

 

웹 폰트의 그룹화

 

 

styles 폴더 안에 fonts 폴더를 만들어서 밑에 방식으로 font를 그룹화 지정 할 수 있습니다.

 

@font-face {

          font-family : font이름(임의로 지정가능)

           src : 경로지정

}

 

위 처럼 하고 font파일도 같이 fonts폴더 안에 넣어 두는게 관리하기 편함!

import type { AppProps } from "next/app";
import "../styles/globals.css";
import Layout from "../component/layouts/layout";
import "../styles/fonts/font.css"; // app 폴더에서 경로 지정하면 어디서든 사용할 수 있음

export default function App({ Component, pageProps }: AppProps): JSX.Element {
  return (
    <>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </>
  );
}

 

 

반응형

댓글