aotoyae

[CSS/Next] Next.js + tailwind 구글폰트 설정 Roboto_Mono 본문

CSS

[CSS/Next] Next.js + tailwind 구글폰트 설정 Roboto_Mono

aotoyae 2024. 3. 13. 22:39

 

 

💡 Next.js 에 폰트 설정을 해보자.

 

layout.tsx

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
// ...

기본 설정은 inter 폰트로 되어 있다.

 

🌀layout 과 같은 위치에 styles/fonts.ts 추가

import { Inter, Roboto_Mono } from 'next/font/google';

export const inter = Inter({ // 우선 남겨둠
  subsets: ['latin'],
  display: 'swap',
});

export const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  weight: ['300'],
  display: 'swap',
});

 

layout 에서 import 했던 구글 폰트를 여기서 받아온다.

 

🌀layout 으로 돌아와 폰트를 받아오고 class 명을 바꿔준다.

layout.tsx

import { roboto_mono } from './styles/fonts';

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={roboto_mono.className}>
// ...

🤤

 

 

 

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

 

Optimizing: Fonts | Next.js

Optimize your application's web fonts with the built-in `next/font` loaders.

nextjs.org

🔗 https://9yujin.tistory.com/116

 

[두둥] Next.js 웹 성능 최적화

한달에 삼만얼마 짜리 요금제를 쓰고 있다. 처음에 제공된 데이터 몇기가를 전부 소진하면 그 이후론 속도제한이 걸린 채 무제한으로 사용할 수 있다. 말이 무제한이지, 웹서핑과 음악 스트리밍

9yujin.tistory.com

 

 

 

저작자표시

'CSS' 카테고리의 다른 글

[CSS/Next] tailwind drop-shadow 태그에 그림자 넣기  (0) 2024.03.21
[CSS/Next] tailwind text-shadow 폰트 그림자 넣기  (0) 2024.03.21
[CSS] input type="file" 파일 선택 버튼 디자인  (0) 2024.02.29
[CSS] 배경색 background-color 투명, 없애기  (0) 2024.02.24
[CSS] select & option : 기본값 설정  (0) 2024.02.08
'CSS' Related Articles more