Fonts in Next JS Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report The font module in next.js allows to add any external or local fonts. Fonts are used to style the components and to increase the readability of the application. The font is associated with the style, size, width, and typeface i.e. design of the letters. We can customize the font according to our choice by simply adding them to the global CSS file and in the head section of the application file. Using this approach, the request is made every single time of use. A better approach is using next/font.Next.js allows you to automatically self-host the font on the Next.js deployment server. Fonts are downloaded at build time and host them. next/font helps fonts to load with zero layout shift. ApproachUsing @next/font in Next.js simplifies integrating Google Fonts, offering optimized loading and improved performance. This method allows easy customization and application-wide use of fonts, enhancing the visual appeal and consistency of your web application.Syntax:import { newFont} from next/font;const newfont = newFont({ weight: '400', style: 'italic', subsets: ['latin'],}) <div classname= {newfont.classname}> GeeksforGeeks</div>Prerequisites:JavaScript/TypeScriptReact JS BasicsNext JSSteps to add Fonts in Next.jsStep 1: To create your app, run the following npx command in your terminal to start the creation process: npx create-next-app@latest Demo-AppStep 2: Provide the necessary details to create your app as shown in the image below.Steps to create the project:Step 3: Install the next/font npm install @next/fontProject Structure:Project StructureThe updated dependencies in package.json file will look like:"dependencies": { "@next/font": "^14.1.0", "next": "14.1.0", "react": "^18", "react-dom": "^18"}Step 4: To start the application run the following command:npm run devGoogle FontsNext JS allows us to use all the google font in the application. They are automatically self hosted and no request is sent form the browser while running the application. You need to import the font from the next/font/google and set the object with the characteristics of the font. One can import multiple fonts at the same time .Example 1: Illustration of using Google Fonts through importing font from next/font/google CSS /*/page.module.css */ .main { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 6rem; min-height: 100vh; } CSS /* globals.css*/ * { box-sizing: border-box; padding: 0; margin: 0; } html, body { max-width: 100vw; overflow-x: hidden; line-height: 1.5; } li { padding: 0.5rem; } JavaScript // layout.js import { Rochester } from 'next/font/google' import './globals.css' const rock = Rochester({ subsets: ['latin'], weight: '400' }) export const metadata = { title: 'Create Next App', description: 'Generated by create next app' } export default function RootLayout({ children }) { return ( <html lang='en'> <body className={rock.className}>{children}</body> </html> ) } JavaScript // page.js import styles from './page.module.css' export default function Home() { return ( <main className={styles.main}> <h1>React Tutorial</h1> <p> React is one of the most popular, efficient, and powerful open-source JavaScript library for building dynamic and interactive user interfaces. Whether you are a beginner or an experienced developer, React Tutorial will significantly enhance your development skills. React JS is not a framework, it is just a library developed by Facebook. </p> <h3>ReactJS Advantages</h3> <ul> <li> Composable: We can divide these codes and put them in custom components. Then we can utilize those components and integrate them into one place. </li> <li> Declarative: In ReactJS, the DOM is declarative. We can make interactive UIs by changing the state of the component and ReactJS takes care of updating the DOM according to it. </li> <li> Community: ReactJS has a huge community because of it’s demand each company wants to work with ReactJS. Companies like Meta, Netflix, etc built on ReactJS. </li> <li> SEO Friendly: ReactJS affects the SEO by giving you a SPA (Single Page Application) which requires Javascript to show the content on the page which can be rendered and indexed. </li> </ul> </main> ) } In the layout.js, Rochester font is imported from the Google Fonts.const rock specify the subset of the font and the weight for the Rochester font. In page.js ,styles are imported from "./page.module.css" which contains the styling of the components in page.js file.Global Styles used for the application are specified in globals.css Output:Google FontExample 2: Using Font in CSS File.Rochester font is imported from "next/font/google" in font.jsconst rock specify the subset of the font and the weight for the Rochester font.It is exported and used in layout.jsIn the layout.js ,font is imported as used through rock.variable. CSS /*globals.css*/ html, body { max-width: 100vw; overflow-x: hidden; line-height: 1.5; font-family: var(--rochester-font); } li { padding: 0.5rem; } JavaScript //font.js import { Rochester } from 'next/font/google' export const rock = Rochester({ weight: '400', subsets: ['latin'], variable: '--rochester-font' }) JavaScript //layout.js import { rock } from './google-fonts/font' import './globals.css' export const metadata = { title: 'Create Next App', description: 'Generated by create next app' } export default function RootLayout({ children }) { return ( <html lang='en'> <body className={rock.variable}>{children}</body> </html> ) } Output:Example 3: Using Embedded Code form Google Font.page.js contains the Head component .It is in inbuilt component, embedded code of the Kode Mono font is added in it from the Google Font website.In page.js ,styles are imported from "./page.module.css" which contains the styling of the components in page.js file.Global Styles used for the application are specified in globals.css CSS /* page.module.css */ .main { display: flex; flex-direction: column; align-items: center; padding: 4rem; min-height: 100vh; } CSS /* globals.css */ :root { --font-mono: 'Kode Mono'; } * { box-sizing: border-box; padding: 0; margin: 0; } html, body { max-width: 100vw; overflow-x: hidden; } h2, p { text-align: justify; color: rgb(255, 0, 255); padding: 1rem 1.2rem; font-family: var(--font-mono); } JavaScript //page.js import Head from 'next/head' import styles from './page.modules.css' export default function Home() { return ( <> <Head> <title>Font</title> <meta name='description' content='Generated by create next app' /> <meta name='viewport' content='width=device-width, initial-scale=1' /> <link rel='icon' href='/favicon.ico' /> //Embedded Code from the Google Font <link rel='preconnect' href='https://fonts.googleapis.com/' /> <link rel='preconnect' href='https://fonts.gstatic.com/' crossOrigin /> <link href= `https://fonts.googleapis.com//css2?family=Kode+Mono:[email protected]&family=Roboto:ital, wght@0,100;0,300;0,400;0,500;0,700;0,900; 1,100;1,300;1,400;1,500;1,700;1,900&display=swap' rel='stylesheet' ></link> </Head> <main className={`${styles.main} `}> <h2>Next JS </h2> <p> Next.js is an open-source web development React-based framework created by Vercel.Next.js application and is used to create production-ready web applications.It has features like hot code reloading, data fetching utilities, dynamic API routes, optimized builds, etc. </p> <h2>React JS</h2> <p> React is one of the most popular, efficient, and powerful open-source JavaScript library for building dynamic and interactive user interfaces. </p> </main> </> ) } Output:Font NextJS Comment More infoAdvertise with us Next Article Next.js Tutorial P pritamvinodfulari Follow Improve Article Tags : Web Technologies ReactJS Next.js Next.js - Questions Similar Reads Next.js Tutorial Next.js is a popular React framework that extends React's capabilities by providing powerful tools for server-side rendering, static site generation, and full-stack development. It is widely used to build SEO-friendly, high-performance web applications easily.Built on React for easy development of f 6 min read Next js basicsNext.js IntroductionNext.js is a powerful and flexible React framework that has quickly become popular among developers for building server-side rendered and static web applications. Created by Vercel, Next.js simplifies the process of developing modern web applications with its robust feature set. In this article, we’ 5 min read Getting Started with Next JSNextJS is an open-source React framework for building full-stack web applications ( created and maintained by Vercel ). You can use React Components to build user interfaces, and NextJS for additional features and optimizations. It is built on top of Server Components, which allows you to render ser 9 min read Next.js InstallationNext.js is a popular React framework that enables server-side rendering and static site generation. It is easy to learn if you have prior knowledge of HTML, CSS, JavaScript, and ReactJS. Installing Next.js involves setting up Node.js and npm, creating a new Next.js project using npx create-next-appa 4 min read NextJS 14 Folder StructureNext.js, a powerful React framework developed by Vercel, continues to evolve, bringing new features and improvements with each release. Version 14 of Next.js introduces enhancements to the folder structure, making it more efficient for developers to organize their projects. In this article, we’ll ex 4 min read Next.js Create Next AppIn Next.js, the create next app command is used to automatically initialize a new NextJS project with the default configuration, providing a streamlined way to build applications efficiently and quickly.System Requirements:Node.js 12.22.0 or laterNPM 6.14.4 or later OR Yarn 1.22.10 or latermacOS, Wi 3 min read Deploying your Next.js AppDeploying a Next.js app involves taking your application from your local development environment to a production-ready state where it can be accessed by users over the internet. Next.js is a popular React framework that enables server-side rendering, static site generation, and client-side rendering 3 min read Next js RoutingNext.js RoutingNext.js is a powerful framework built on top of React that simplifies server-side rendering, static site generation, and routing. In this article, we'll learn about the fundamentals of Next.js routing, explore dynamic and nested routes, and see how to handle custom routes and API routes.Table of Con 6 min read Next.js Nested RoutesNext.js is a popular React framework that enables server-side rendering and static site generation. One of the key features that enhance the development experience in Next.js is its routing system.While Next.js provides a file-based routing mechanism, implementing nested routes requires some additio 4 min read Next.js PagesThe Next.js Pages are the components used to define routes in the next application. Next.js uses a file-based routing system that automatically maps files in the pages directory to application routes, supporting static, dynamic, and nested routes for seamless web development. In this article, we wil 3 min read Next JS Layout ComponentNext JS Layout components are commonly used to structure the overall layout of a website or web application. They provide a convenient way to maintain consistent header, footer, and navigation elements across multiple pages. Let's see how you can create and use a Layout component in Next.js. Prerequ 3 min read Navigate Between Pages in NextJSNavigating between pages in Next.js is smooth and optimized for performance, with the help of its built-in routing capabilities. The framework utilizes client-side navigation and dynamic routing to ensure fast, smooth transitions and an enhanced user experience.Prerequisites:Node.js and NPMReactJSNe 3 min read loading.js in Next JSNext JS is a React framework that provides a number of features to help you build fast and scalable web applications. One of these features is loading.js which allows you to create a loading UI for your application.Prerequisites:JavaScript/TypeScriptReactJS BasicsNextJSLoading UI is important becaus 3 min read Linking between pages in Next.jsIn this article, we are going to see how we can link one page to another in Next.js. Follow the below steps to set up the linking between pages in the Next.js application:To create a new NextJs App run the below command in your terminal:npx create-next-app GFGAfter creating your project folder (i.e. 2 min read Next.js RedirectsNext.js Redirects means changing the incoming source request to the destination request and redirecting the user to that path only. When the original web application is under maintenance, the users browse or access the web application, and we want to redirect the user to another web page or applicat 4 min read Next.js Dynamic Route SegmentsDynamic routing is a core feature in modern web frameworks, enabling applications to handle variable paths based on user input or dynamic content. In Next.js 13+, with the introduction of the App Router, dynamic routes are implemented using a folder-based structure inside the app directory.This arti 2 min read Middlewares in Next.jsMiddlewares in Next.js provide a powerful mechanism to execute custom code before a request is completed. They enable you to perform tasks such as authentication, logging, and request manipulation, enhancing the functionality and security of your application.Table of ContentMiddleware in Next.jsConv 7 min read Next JS Routing: InternationalizationNext.js allows you to configure routing and rendering for multiple languages, supporting both translated content and internationalized routes. This setup ensures your site adapts to different locales, providing a seamless and localized experience for users across various languages.Prerequisites:NPM 4 min read Next js Data FetchingNext.js Data FetchingNext.js Data Fetching refers to the process of getting data from a server or an API and displaying it on a webpage. Next.js offers multiple data-fetching methods to handle server-side rendering, static generation, and client-side rendering. These methods enable you to fetch and manage data efficient 6 min read Server Actions in Next.jsServer actions in Next.js refer to the functionalities and processes that occur on the server side of a Next.js application. It enables efficient, secure handling of server-side operations like data fetching, form processing, and database interactions, enhancing application security and performance 4 min read How to Fetch data faster in Next.js?NextJS, a popular React framework provides various approaches to fetch data efficiently. Optimizing data fetching can significantly improve the performance and user experience of your NextJS applications. We will discuss different approaches to Fetch data faster in NextJS: Table of Content Static Ge 6 min read Next js RenderingServer Components in Next.jsServer Components in Next.js offer a way to build components that are rendered on the server rather than on the client. This feature enhances performance by reducing the amount of JavaScript sent to the browser and allows for faster initial page loads. In this post, we will explore the Server Compon 4 min read Edge Functions and Middleware in Next JSNext JS is a React-based full-stack framework developed by Vercel that enables functionalities like pre-rendering of web pages. Unlike traditional react apps where the entire app is loaded on the client. Next.js allows the web page to be rendered on the server, which is great for performance and SEO 3 min read How to Reset Next.js Development Cache? Next.js, a widely used React framework, offers server-side rendering, static site generation, and robust development features. However, cached data in your development environment can sometimes cause issues. Resetting the cache ensures you work with the latest data and code. Let’s explore several me 3 min read Next js StylingHow to Add Stylesheet in Next.js ?In Next.js, adding a stylesheet enhances your app's styling capabilities. Import CSS files directly in your components or pages using ES6 import syntax. Next.js optimizes and includes these styles in the build process, ensuring efficient and modular CSS management.In this post, we are going to learn 4 min read Controlling the specificity of CSS Modules in a Next.js AppCSS Modules are one of the popular techniques that are used for local scoping CSS in JavaScript behavioral applications. In Next.js applications, CSS Modules are mostly used to generate the unique class names for our styles, preventing them from conflicting with the styles from different components 4 min read Install & Setup Tailwind CSS with Next.jsTailwind is a popular utility first CSS framework for rapidly building custom User Interfaces. It provides low-level classes, those classes combine to create styles for various components. You can learn more about Tailwind CSS here. Next.js: Next.js is a React-based full-stack framework developed b 2 min read CSS-in-JS Next JSCSS-in-JS in Next.js enables you to write CSS styles directly within your JavaScript or TypeScript files. This approach allows you to scope styles to components and leverage JavaScript features, improving maintainability and modularity.In this article learn how to use CSS-in-JS in NextJS its syntax, 3 min read Next.js Styling: SassNext.js supports various styling options, including Sass, which allows for more advanced styling techniques like variables, nested rules, and mixins. Integrating Sass into a Next.js project enhances your styling capabilities and makes managing styles more efficient and maintainable.In this article, 3 min read Next js OptimizingNext.js Bundle Optimization to improve PerformanceIn this article, We will learn various ways to improve the performance of the NextJS bundle which results in increasing the performance of NextJS applications in Google PageSpeed Insights or Lighthouse. As per the documentation, NextJS is a React framework that gives you the building blocks to creat 6 min read Next JS Image Optimization: Best Practices for Faster LoadingLarge and unoptimized images can impact a website's performance on loading time. Optimizing images is necessary to improve the performance of the website. Next.js provides built-in support for image optimization to automate the process, providing a balance between image quality and loading speed. Pr 4 min read Next.js Functions : generateMetadataNextJS is a React framework that is used to build full-stack web applications. It is used both for front-end as well and back-end. It simplifies React development with powerful features. One of its features is generateMetadata. In this article, we will learn about the generateMetadata function with 3 min read Lazy Loading in Next.jsLazy loading in NextJS is a technique used to improve the performance and loading times of web applications built with the NextJS framework. With lazy loading, components or modules are loaded only when they are needed, rather than upfront when the page is initially rendered. This means that resourc 4 min read How to Add Google Analytics to a Next.js Application?Adding Google Analytics to a Next.js application allows you to track and analyze your website's traffic and user actions. This can provide valuable insights into how users interact with your site, helping you make informed decisions to improve user experience and drive business goals. This article h 3 min read Next.js Static File ServingNext.js allows you to serve static files from the public directory, making them accessible at the root URL. This feature enables easy inclusion of assets like images, fonts, and static HTML files, enhancing your application's functionality and user experience.Static filesAll those files which need t 2 min read Next js ConfiguringNext.js TypeScriptNextJS is a powerful and popular JavaScript framework that is used for building server-rendered React applications. . It provides a development environment with built-in support for TypeScript, as well as a set of features that make it easy to build and deploy web applications. It was developed by Z 4 min read Next.js ESLintESLint is a widely-used tool for identifying and fixing problems in JavaScript code. In Next.js projects, integrating ESLint helps ensure code quality and consistency by enforcing coding standards and catching errors early in the development process.In this article, we'll explore how to set up ESLin 3 min read Next.js Environment VariablesEnvironment variables are a fundamental aspect of modern web development, allowing developers to configure applications based on the environment they are running in (development, testing, production, etc.). In Next.js, environment variables provide a flexible and secure way to manage configuration s 3 min read MDX in Next JSMDX is a lightweight markup language used to format text. It allows you to write using plain text syntax and convert it to structurally valid HTML. It's commonly used for writing content on websites and blogs. In this article we will see more about MDX in Next JSWhat is MDX?MDX stands for Multidimen 4 min read Next.js src DirectoryThe NextJS src directory is a project structure that is optional but is widely recommended. It helps to organize the project in a well-defined structure.Organizing a Next.js project with a well-planned folder structure is important for readability, scalability, and maintainability. A clear structure 4 min read Draft Mode Next.jsDraft Mode in Next.js enables content previewing and editing directly within your application, allowing content creators to view changes before publishing. This feature is especially useful for content management systems or any app where content updates need to be reviewed in real-time. We will expl 5 min read Next.js Security HeadersNext.js security headers help protect your application from common web vulnerabilities by enforcing security policies at the HTTP level. By configuring these headers, you enhance your app's security and ensure safer interactions for your users.In this article, we’ll learn about security headers, the 6 min read Unit Testing in Next JS: Ensuring Code Quality in Your Project Unit testing in Next.js ensures that individual components and functions work as expected. It improves code reliability, helps catch bugs early, and facilitates easier maintenance and refactoring by verifying the correctness of isolated units of code. Unit testing is an essential aspect of software 4 min read Like