웹사이트 폰트 바꿔 사용하기 (feat.구글폰트)

웹 사이트에서 폰트의 힘은 대단하다. 폰트하나로 디자인도 가능하고 느낌이 확 달라지기 때문,

 

구글 폰트를 애용하는 편이다! 저작권도 확실히 표기되어있고 단순히 link태그나 import해와

 

쉽게 사용할 수 있다.

 

https://fonts.google.com/

Google Fonts

이렇게 구글 폰트 사이트로 들어가서

 

원하는 폰트들이 있으면 클릭해서 들어가서 하단으로 내려가 +Select this Style 를 클릭해준다.

 

 

그러면 우측에 이와같이 추가한 폰트들을 한번에 사용할 수 있게 알아서 코드를 만들어주고

 

link태그를 가져와사용하거나 Next.js나 React같은경우는

 

__app.js

/* eslint-disable react/react-in-jsx-scope */
import "../styles/globals.css";
import type { AppProps } from "next/app";
import Layout from "../components/Layout";
import "bootstrap/dist/css/bootstrap.min.css";
import SSRProvider from "react-bootstrap/SSRProvider";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <SSRProvider>
        <Layout>

          <Component {...pageProps} />
        </Layout>
      </SSRProvider>

      <style jsx global>
        {
          `
          @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Do+Hyeon&family=Jua&display=swap');

body {
  font-family: 'Jua', sans-serif;
    }
    
    `
        }
      </style>
    </>
  );
}

export default MyApp;

 

이런식으로 가장 하단에 style jsx global에 넣어서 사용해 주었다.

 

물론 원하는 컴포넌트 내에서도 사용이 가능하다.

 

css에 @import해서 사용하거나

 

style 태그내에서 link태그를 넣어 사용해주면된다.