24. 07. 09 TIL

프로젝트를 시작했다! 드디어...

일단 포켓몬 + 다마고치 느낌으로 이전에 만들었던 포켓몬 도감에서 업그레이드한 버전이다.

 

나는 상점 페이지 + 디테일 + 아이콘, 이미지 정리 + 폰트 추가를 맡았는데

 

폰트 추가는 그냥 거슬려서 넣은 거긴 한데

 

이게 또 이전엔 그냥 index.css에 폰트를 넣으면 됐어서 문제가 없었다.

 

그런데 이제 next.js + 바뀐 폴더구조(index.css 그딴 거 읎슴)으로 하니 폰트 변경을 하려다가도

 

...어떻게 하드라? 하게 되는 것이었다...

 

물론 찾아보고 바로 성공했지만

 

그래도 기본적인 느낌이라 한번 정리!

 

나는 일단 눈누의 둥근모 폰트를 사용했다.

 

가장 먼저!

 

global.css 파일에 들어간다.

 

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

기본은 이렇게 테일윈드만 덩그러니 있다.

 

여기에 

@font-face {
  font-family: 'DungGeunMo';
  src: url('') format('woff');
  font-weight: normal;
  font-style: normal;
}

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

body {
  font-family: 'DungGeunMo';
}

웹폰트와 body에 폰트 패밀리를 추가해준다.

 

그리고 tailwind.config.ts 파일에 들어가서

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}'
  ],
  theme: {
    extend: {
      fontFamily: {
        dunggeunmo: ['DungGeunMo']
      }
    }
  },
  plugins: []
};
export default config;

이렇게 fontFamily를 extend 밑에 추가해준다.

 

이제 그럼 이걸 어떻게 적용하느냐,.,,

 

layout.tsx에 적용하는데 한두개만 있지 않다?... 파일을 일단 한번 다 열어본다.

나는 헤더, 메인, 메뉴바가 들어있는 layout 파일에 클래스 네임을 

 font-dunggeunmo

를 넣어 적용했다.

 

간단 >ㅡ< 음홓홓홓