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
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
@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:
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
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:
Roboto font
Share your thoughts in the comments
Please Login to comment...