如何在Next.js中使用两种不同的Google字体与Material UI应用程序?

brc7rcf0  于 2023-06-22  发布在  Go
关注(0)|答案(1)|浏览(232)

目前正在将我的MUI 5应用程序从Next 12迁移到Next 13,并尝试使用next/font。在我的Next 12版本中,我使用了两种Google字体-'Rubik''Ephesis',由于它们被导入到<head>中,因此可以使用CSS全局访问它们。
例如,我可以写<Typography fontFamily='Ephesis' children='Hi' />,它可以工作。
然而,现在,使用next/font,我不知道如何全局实现这两种字体家族,以便像上面的<Typography>一样工作!
任何提示是赞赏。

v440hwme

v440hwme1#

请参阅官方文档中关于使用多种字体以及使用字体定义文件在多个地方使用它们的这一节。

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

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

然后在应用程序的某个地方,你可以像这样导入字体:

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 gont</p>
    </div>
  );
};

相关问题