logomedCode
December 4, 2023

Next.js 13.4 Fonts Optimization Step by Step 🔥

This new font system also allows you to conveniently use all Google Fonts with performance and privacy in mind. CSS and font files are downloaded at build time and self-hosted with the rest of your st...
Next.js 13.4 Fonts Optimization Step by Step 🔥

#Next.js #Dev #Fonts #JavaScript

Google Fonts

Automatically self-host any Google Font. Fonts are included in the deployment and served from the same domain as your deployment. No requests are sent to Google by the browser.

Get started by importing the font you would like to use from next/font/google as a function. We recommend using variable fonts

 for the best performance and flexibility.

import { Inter } from 'next/font/google'
 
// If loading a variable font, you don't need to specify the font weight
const inter = Inter({
 subsets: ['latin'],
 display: 'swap',
})
 
export default function RootLayout({ children }) {
 return (
  <html lang="en" className={inter.className}>
   <body>{children}</body>
  </html>
 )
}

if you can't use a variable font you will ned to specify weight

import { Roboto } from 'next/font/google'
 
const roboto = Roboto({
 weight: '400',
 subsets: ['latin'],
 display: 'swap',
})
 
export default function RootLayout({ children }) {
 return (
  <html lang="en" className={roboto.className}>
   <body>{children}</body>
  </html>
 )
}

You can specify multiple weights and/or styles by using an array:

const roboto = Roboto({
 weight: ['400', '700'],
 style: ['normal', 'italic'],
 subsets: ['latin'],
 display: 'swap',
})


with Tailwind CSS

In the example below, we use the font Inter from next/font/google (you can use any font from Google or Local Fonts). Load your font with the variable option to define your CSS variable name and assign it to inter. Then, use inter.variable to add the CSS variable to your HTML document.

import { Inter, Roboto_Mono } from 'next/font/google'
 
const inter = Inter({
 subsets: ['latin'],
 display: 'swap',
 variable: '--font-inter',
})
 
const roboto_mono = Roboto_Mono({
 subsets: ['latin'],
 display: 'swap',
 variable: '--font-roboto-mono',
})
 
export default function RootLayout({ children }) {
 return (
  <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
   <body>{children}</body>
  </html>
 )
}
/** @type {import('tailwindcss').Config} */
module.exports = {
 content: [
  './pages/**/*.{js,ts,jsx,tsx}',
  './components/**/*.{js,ts,jsx,tsx}',
  './app/**/*.{js,ts,jsx,tsx}',
 ],
 theme: {
  extend: {
   fontFamily: {
    sans: ['var(--font-inter)'],
    mono: ['var(--font-roboto-mono)'],
   },
  },
 },
 plugins: [],
}

You can now use the font-sans and font-mono utility classes to apply the font to your elements.



author image
AuthorMOHAMMED DAKIRmohamed7dakir@gmail.com

This website uses cookies to enhance your browsing experience, analyze site traffic, and serve better user experiences. By continuing to use this site, you consent to our use of cookies. Learn more in our cookie policy

Explore the latest insights, articles,free components, and expert advice on programming and software development

© Copyright 2024 MED DAKIR. All rights reserved./privacy policy