The process for incorporating two distinct Google fonts into a Next.js project using Material UI

Question

The process for incorporating two distinct Google fonts into a Next.js project using Material UI

Currently in the process of upgrading my MUI5 application from Next 12 to Next 13 and experimenting with integrating next/font. In my previous Next 12 version, I utilized two Google fonts - 'Rubik' and 'Ephesis' which were included in the <head> section, making them available globally for use in CSS styling.

For instance, I could simply use

<Typography fontFamily='Ephesis' children='Hi' />

and it would display correctly.

However, now that I am using next/font, I'm unsure how to incorporate both font families globally so that components like <Typography> mentioned above continue to work.

Any advice or suggestions would be greatly appreciated.

css next.js material-ui fonts

Answer 1

Answer №1

For detailed information on how to use multiple fonts and implement them across various sections using a font definitions file, refer to this specific section in the official documentation.

import { Roboto, Inter } from 'next/font/google';

export const inter = Inter();
export const roboto = Roboto({ weight: '400', subsets: ['latin'] });

To incorporate these fonts into your application, you can import them as shown below:

import { roboto, inter } from './my-font-file';

const Component = () => {
  return (
    <div>
      <p className={roboto.className}>I am in Roboto font</p>
      <p className={inter.className}>I am in Inter font</p>
    </div>
  );
};

Answer 2

For detailed information on how to use multiple fonts and implement them across various sections using a font definitions file, refer to this specific section in the official documentation.

import { Roboto, Inter } from 'next/font/google';

export const inter = Inter();
export const roboto = Roboto({ weight: '400', subsets: ['latin'] });

To incorporate these fonts into your application, you can import them as shown below:

import { roboto, inter } from './my-font-file';

const Component = () => {
  return (
    <div>
      <p className={roboto.className}>I am in Roboto font</p>
      <p className={inter.className}>I am in Inter font</p>
    </div>
  );
};

The process for incorporating two distinct Google fonts into a Next.js project using Material UI

Answer №1

Similar questions

The img-fluid class is not properly adjusting the height of the image

Placing emphasis on a link's destination

Value of an object passed as a parameter in a function

Showing identification on the drop-down list

Utilizing CSS to incorporate a background image into HTML code

The central navigation system of the Owl Carousel

I am unable to utilize folder paths in CSS within my React application

In bootstrap 3.0, columns are arranged in a vertical stack only

"Unable to get the overflow-x: auto property to function properly

Display a div using Jquery when hovering over it with several classes

Adjust the top margin of a div to match the height of the screen within an iframe, ensuring cross-browser

Is there a way to automatically close the Foundation topbar menu when a link is selected?

Implementing dynamic content loading using CSS and jQuery upon link/button activation

Step-by-step guide to implementing a floating action button on the bottom-right corner of a screen using Material-UI in a React application

Move the components over to the right

Showcasing top performers via JavaScript tabs

The image on Bootstrap isn't showing up

Is there a way for me to modify this carousel so that it only stops when a user hovers over one of the boxes?

"Trouble with getting the Twitter Bootstrap dropdown menu to function properly

How can CSS be used to prevent line breaks between elements in a web page?