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

 

웹 폰트의 그룹화

 

 

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>

    </>

  );

}