Horje
Fonts in Next JS

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.

Approach

Using @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:

Steps to add Fonts in Next.js

Step 1: To create your app, run the following npx command in your terminal to start the creation process:

 npx create-next-app@latest Demo-App

Step 2: Provide the necessary details to create your app as shown in the image below.

Steps-to-Create-the-project

Steps to create the project:

Step 3: Install the next/font 

npm install @next/font

Project Structure:

Project-Structure

Project Structure

The 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 dev

Google Fonts

Next 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-Font

Google Font

Example 2: Using Font in CSS File.

  • Rochester font is imported from “next/font/google” in font.js
  • const rock specify the subset of the font and the weight for the Rochester font.It is exported and used in layout.js
  • In 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:

Google-Font

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

Font NextJS


 


Reffered: https://www.geeksforgeeks.org

ReactJS

Related
Built-in React Hooks Built-in React Hooks
What does useImperativeHandle do, and when do we use it? What does useImperativeHandle do, and when do we use it?
How to create Grid Lights Using React ? How to create Grid Lights Using React ?
State Management with useState Hook in React State Management with useState Hook in React
React Chakra UI Other Show/Hide React Chakra UI Other Show/Hide

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 13



 

Horje