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

Last Updated : 31 Jul, 2024

In Next.js, integrating fonts such as Google Fonts and using Tailwind CSS for styling can greatly enhance the design and user experience of your application. They play 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 customers visiting our websites. In this tutorial, we'll see how to integrate Google Fonts into a Next JS project.

Prerequisite:

Table of Content

Using TailwindCSS
Using Google Fonts

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

Step 2: Switch to the project directory

cd my-app

Folder Structure:

Screenshot-2023-12-06-235523 — 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"
}

1. Using TailwindCSS

Use Tailwind CSS in Next.js by installing it, adding its directives to your global stylesheet, and applying utility classes directly in your components for efficient styling and design consistency.

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

CSS

/*global.css*/

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

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>
		</>
	);
}

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

2. Using Google Fonts

Integrate Google Fonts in Next.js by using the next/font package for optimized font loading or including <link> tags in _app.js , _document.js or layout.js to load fonts directly from Google's servers.

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>
	);
}

Output:

Screenshot-2023-12-07-003148 — Roboto font

How to use Google Fonts in Tailwind CSS?

tushardogra19

Improve

Article Tags :