Using Fonts in Next JS(Google Fonts, Tailwind CSS)

Last Updated : 12 Dec, 2023

Fonts are one of the most viewed component in the application. They plays an important role in defining the looks and readability of a website or application. Integrating custom fonts on the platform make our text look more stylish and appealing to customer visiting our websites. In this tutorial, we’ll see how to integrate Google Fonts into a Next JS project.

Prerequisite:

Steps to Create Next Application:

Step 1: Initialize the react app using this command in the terminal and click yes to every question. It will install all the packages.

npx create-next-app@latest my-app

Folder Structure:

Folder Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.0.4"
}
"devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "eslint": "^8",
    "eslint-config-next": "14.0.4"
}

Example: Now replace the code in the page.tsx and global.css of app folder with this code.

Javascript

//page.tsx
 
import Image from "next/image";
import Link from "next/link";
export default function Home() {
    return (
        <>
            <div className="h-16  px-10 bg-green-500 flex items-center justify-between">
                <h1 className="text-3xl font-bold">
                    <Link href="/">My Portfolio</Link>
                </h1>
                <div className=" flex gap-10">
                    <Link href="/About"> About</Link>
                    <Link href="/Projects">Projects</Link>
                    <Link href="/Contact">Contact</Link>
                    <Link href="/Vision">Vision</Link>
                </div>
            </div>
        </>
    );
}

CSS

/*global.css*/
 
@tailwind base;
@tailwind components;
@tailwind utilities;

Steps to Run the Project: Save all files and start the project by writing the following command in the terminal.

npm run dev

Output:

WhatsApp-Image-2023-12-07-at-122312-AM(1)

You will look website like this

Now we will implement ‘Roboto’ Google Fonts.

Step1: Open the layout.tsx file in pp folder and replace it with following code.

Javascript

//layout.tsx
 
import { Rubik_Bubbles } from 'next/font/google'
import './globals.css'
 
 
const roboto = Rubik_Bubbles({ weight: ["400"], subsets: ["latin"] });
 
 
export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}
 
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={roboto.className}>{children}</body>
    </html>
  )
}