NextJS13으로 새 포트폴리오를 만들자. 1 - custom fonts

디자인은

https://brittanychiang.com/

을 참고했습니다.

nextjs13 installation

https://nextjs.org/docs/getting-started/installation

의 글에 의거해서

pnpx create-next-app@latest

먼저 새 프로젝트를 열어준다.

What is your project named? portfolio
Would you like to use TypeScript with this project? Yes
Would you like to use ESLint with this project? Yes
Would you like to use Tailwind CSS with this project? Yes
Would you like to use `src/` directory with this project? No
Use App Router (recommended)? Yes
Would you like to customize the default import alias? No
// No가 기본 세팅이지만, 기본 세팅은 "@/*": ["./*"] 으로 맨 상위를 가르키고  있다.
// app router를 사용하면 app 폴더 외부를 참조할 일이 많은 것일까? 이것은 프로젝트를 진행하며 알아갈 수  있을 듯.

먼저 위 디자인에서는 Inter, Monsterrat 폰트를 사용하고 있다.
둘 다 구글 폰트이므로,

https://nextjs.org/docs/app/building-your-application/optimizing/fonts

// 이렇나 식으로 쉽게 적용이 가능했다.

import { Inter, Roboto_Mono } from 'next/font/google'
 
export const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})
 
export const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
})

//실제 적용할 때는

<span className={inter.className}> this is Inter font.<span>

여기에 만약 추가적인 폰트들(구글에 없는 것)을 넣으려면,

import localFont from 'next/font/local'
 
// Font files can be colocated inside of `pages`
const myFont = localFont({ src: './my-font.woff2' })
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={myFont.className}>
      <Component {...pageProps} />
    </main>
  )
}

이렇게 폰트 자체를 받아서 사용할 수도,

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: 'NanumSquareNeo';
  font-weight: 400;
  font-style: normal;
  src: url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-bRg.eot');
  src: url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-bRg.eot?#iefix')
      format('embedded-opentype'),
    url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-bRg.woff2')
      format('woff2'),
    url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-bRg.woff')
      format('woff'),
    url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo-bRg.ttf')
      format('truetype');
  font-display: swap;
}

전통적으로 css 파일 안에 받아서 사용할 수도 있을 것 같다.

최종적으로 다음과 같다.

./app/page.tsx

// 사용하는 폰트는 inter (가장 상위 layout에 html에 적용되어 있어 다른 설정 필요 없음.)
// montserrat은 따로 import해서 사용.
// nanum 고딕 - 기존 tailwind config에 정의하여 사용하는 방식으로 사용함.

import { montserrat } from '@/components/common/fonts';

export const metadata = {
  title: 'JIHYEON JEONG',
  description: 'frontend dev',
};

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <p className={montserrat.className}>new portfolio</p>
      <p>this is inter</p>
      <p className="font-nanum-font">this is nanum</p>
    </main>
  );
}

와 같은 방식으로 적용하면

잘 적용된 것을 볼 수 있다.