Font importing and applying issue encountered in NextJS

Currently in the process of converting a static HTML template to Next/React, but I'm facing an issue with applying a Google font (Rajdhani) to the body. The font only seems to apply to the main tag, causing layout issues. Changing the monospace attribute in globals.css results in a Times New Roman style font appearing, indicating some change but not the desired outcome. I'm utilizing Next.js 14.2.3 with React, Tailwind, and Framer Motion for this project. While scaling works when the monospace attribute is implemented, the font itself still remains unaffected. Even after attempting to import the font via a link in the header, I've had no success. Feeling stuck and unsure of what steps to take next.

View left-layout.js | right-globals.css

The struggle continues as I strive to get the desired font working on the body rather than just on the main tag, which disrupts the overall styling.

htmlcssreactjsnext.js

Answer №1

Some key points to note.

  1. If you need to customize the base styles in Tailwind, you can use the @layer directive. [1]
@layer base {
    body {
        /* your custom styles here */
    }
}
  1. There is a specific guide on incorporating NextJS's fonts package with Tailwind [2]. It appears they are implementing an approach using css variables instead of classNames.
import { Inter } from 'next/font/google'
 
const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
})
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={`${inter.variable} font-sans`}>
      <Component {...pageProps} />
    </main>
  )
}

Additionally, remember to include it in the tailwind.config.js file

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)'],
        mono: ['var(--font-roboto-mono)'],
      },
    },
  },
  plugins: [],
}

References:

1: https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles

2: https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#with-tailwind-css

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm interested in learning about the distinctions between these two if conditions in React. Could someone provide an explanation

state = { count: 1, }; render() { let classes = "badge m-5 bg-"; let { count } = this.state; count === 1 ? (classes += "success") : (classes += "warning");//1st Condition classes+= (count===1)?" ...

reactjsbootstrap-5

Ways to refresh a select element using jQuery

Can someone help me with this? <select id="apple"> <option>choose something</option> <option value="1">something 1</option> <option value=2">something 2</option> </select> If you know jQuery, could you shar ...

jqueryhtml

Incorporate a new JavaScript animation as the background for an established website, replacing the static background image

Seeking assistance with my portfolio as I delve into the world of Webdesign and learn the basics from templates. How can I integrate this javascript code into the background of my site, replacing the current minecraft image? Every attempt to implement it ...

javascriptjqueryhtmlcssweb

Updating MongoDB models in Prisma: A step-by-step guide

Recently, I made some changes to the properties in my Prisma models as a beginner. However, I encountered an issue where the new properties are not being recognized when trying to create a new document in Prisma. Strangely, the old properties are still wor ...

next.jsprisma

What is the way to action an image if it doesn't have an ID and is part of a dynamic numeric system

Is there a way to automatically delete a file in order to keep things clean? <img src="/images/delete.jpg" class="pointer" alt="delete" title="delete" onclick="DeleteThis('[stable number]', '[dynamic file number]')"> The dynamic ...

htmlseleniumcucumbercapybara

The outcomes of using Wget versus Python requests may vary

I have been attempting to extract transaction records from the following website: . While researching on stack overflow, I came across a possible solution that involves using urllib.request and selenium.webdriver to retrieve and render a webpage. Here&ap ...

htmlselenium-webdriverweb-crawlerwget

Tips for adjusting the width of your slider revolution

As a newcomer to slider revolution, I am trying to figure out how to make it full width on the screen. So far, I have attempted the following: <!-- START REVOLUTION SLIDER 5.0 --> <div class="rev_slider_wrapper"> ...

jqueryhtmlrevolution-slider

Develop a MySQL table using AJAX and HTML within a Cordova application

I've been developing an app using Cordova and I'm looking to create a feature where users can create and join different rooms to perform various actions. Despite trying multiple tutorials and scouring the internet, I'm struggling to understa ...

phphtmlmysqlajaxcordova

Attempting to align several div elements in the middle while ensuring they all stay in a single row

I've been attempting to center a contact form and a feedback form side by side. I tried using float: left; for both to align them horizontally, but I also want them to be centered on the page. Whenever I manage to display them together horizontally, ...

htmlcss

Dynamic menu causing interference with other elements of the code

When the width reaches a maximum of 37.em, the navigation styled under a hamburger menu automatically opens. I would prefer it to remain closed rather than open when scaled to that size. It also allows the underlying menu underneath it (div.gallery with cl ...

javascripthtmlcss

Raised button in React not utilizing material UI with custom link paths

In my Django project, I am utilizing material-ui to display various components with different contents. One specific feature includes a button on the home page that, when clicked, should route the user to the signup page. Here is the code snippet for the ...

reactjsmaterial-ui

The field must be filled in if it has not been explicitly stated as optional

Here is an example of a Django model that I am working with: class Component(models.Model): parent = models.ForeignKey( "self", on_delete=models.CASCADE, null=True, blank=True, related_name="children" ) vessel = mode ...

reactjsdjangodjango-rest-framework

The Intriguing Riddle of HTML Semantic

I've been working on a puzzle presented in the link provided below: HTML Structure Challenge This mind-teaser consists of three questions: Modify the HTML code of the website to enhance its structure as follows: Replace the generic outer div eleme ...

htmlcss

Enabling onClick based on conditions

I'm struggling to disable a Link onClick when a certain condition is not met. Attempted to move the logic outside of render using a function, but the button always ends up disabled. Tried CSS to disable click, only to realize that tab and enter can ...

javascriptreactjs

The issue with scrolling in the Chrome app arises when a fixed element is present, causing the scroll

I am experiencing an issue with my chrome app. The main window displays correctly, but the mouse scroll wheel does not work. Interestingly, when I open the main.html file in Chrome directly, the scrolling works perfectly fine. How can I troubleshoot and fi ...

javascripthtmlgoogle-chromescrollgoogle-chrome-app

What is the most frequently employed syntax for a template rendering system?

Creating a template engine is my current project, which involves adding data to a template to generate a document. This concept is commonly seen in Active Server Pages, JavaServerPages, PHP, shell/bash scripts, ant, and Word form letters. Here are a few e ...

htmlxmltemplates

choosing an item depending on the chosen value

I am working on implementing a feature where the value of a select element determines how another element transitions. In my scenario, I have two tags with data in them: <select data-name="name goes here" updateElement()></select> <select ...

javascripthtmlcssfunctionelement

Implementing Mollie script into a ReactJS webpage

I've been encountering an issue while attempting to integrate a script called Mollie (used for payments) into my React project. I'm unsure of the correct way to import it in this environment. In JavaScript, typically you would do something like t ...

javascriptreactjsmollie

The script has been modified to add "=s1400" to the image source path, causing the image to fail to load

I have a good understanding of HTML and CSS, but I'm struggling with JavaScript. I noticed that there is a script adding "=s1400" to the image path which is causing the image not to load. You can see the URL is (source files can be viewed using Chrom ...

javascripthtmlcss

Create a login <div> that appears to float effortlessly on the screen

Seeking assistance in creating a login div similar to the one on ups.com. Upon clicking the login button on www.ups.com, a floating login div appears. How can I generate a similar div? Any help would be greatly appreciated. Thank you. ...

htmlcss