Next.js에서 Google Fonts 적용 방법 뽀개기

Google Fonts 사이트에서 파일을 다운로드하는 방법을 소개하려고 한다. 

 

배포 과정에서 google fonts api 주소랑 연결이 잘 안되는 에러를 발견했기 때문이다. 

이참에 다양한 font도 구경해보자 ~~

 

쉬워서 금~방 적용할 수 있다. 

거두절미하고 바로 시작 ! 

 

01. Google Fonts 사이트 접속 

https://fonts.google.com/

Browse Fonts - Google Fonts

 

위 사이트에 접속하자. 

 

02. 각종 설정 

페이지에 왼쪽에 설정할 것들이 있다. 

- 언어 설정 Korean으로 ~

 

- serif , sans serif 설정 ~

 

그러면 오른쪽에 즉각즉각 해당하는 font들을 확인할 수 있다. 

 

03. 맘에 드는 font 선택 

 

오오 ~~~ 다 탐난다. 어떻게 골라 

하지만 골라보자 ~~ 

 

04. Get font 클릭 

하나 고르면 이렇게 오른쪽 위에 Get font 버튼이 있을 것이다. 

Get 해보자 ~~ 

05. 다운로드 아이콘 클릭 

download 아이콘도 보이나? 폴더를 다운 받아보자 ~ 

 

그러면 이렇게 zip 폴더가 다운이 된 것을 확인할 수 있다. ~~ 

 

06. Next.js 프로젝트에서 폴더를 구성

이렇게 만들어주면된다. 

나는 font를 두개를 다운 받았다. 그래서 fonts 폴더 아래 두가지 폴더가 있는 것 !

폴더 이름은 해당 font에 맞게 작성해주면 안헷갈리겠다 ~

 

07. 다운받은 zip 폴더 내 ttf 형식 파일 이동시킨다. 

아까 다운 받은 zip 폴더 내에 ttf 형식 파일을 우리의 next.js 폴더 안에 쏙 넣어보자 ~ 

우리가 만든 폴더 안에 파일이 잘 들어간 것을 확인할 수 있다. 

07. global.css 파일 작성 

설정을 아래와 같이 해준다. 

 

body 에 전체 적용해준다. 

 

곧 끝난다 힘을 내보자 ~ 

08. _app.tsx에 import 해주면 끝 !

 

프로젝트 내 모든 글자에 해당 font가 적용된다. 

 

끝 !!! 

 

그런데,,, 만약 ? 

09. 만약 특정 class에 해당 font를 적용하고 싶다면?

global.css 파일에 이렇게 css 설정해주고, 

이런식으로 사용하면 된다. 

 

정말 쉽다 !!!