I am currently working with NextJS version 14 and I have the following setup:
In my globals.css file, I have imported a Google font like so:
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@100;200;300;400;500;600;700;800&display=swap');
@layer reset {
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
}
Then in my global layout.js file, which serves as the main layout of my application, I have included the following code:
import '../globals.css'
import { notFound } from 'next/navigation';
import { getTranslations } from 'next-intl/server';
import React from 'react';
import { colors, fonts } from '../globalTokens.stylex';
import * as stylex from '@stylexjs/stylex';
const styles = stylex.create({
html: {
colorScheme: 'light dark',
},
reset: {
minHeight: '100%',
margin: 0,
padding: 0,
},
body: {
background: colors.background,
fontFamily: "Plus Jakarta Sans" //I specified the fontFamily for my app here
},
});
export default async function RootLayout({ children, params: { locale } }) {
if (!locales.includes(locale)) notFound();
return (
<html {...stylex.props(styles.html, styles.reset)} lang={locale}>
<body {...stylex.props(styles.reset, styles.body)}>
{children}
</body>
</html>
)
}
Despite setting the font family in the global layout, I am facing an issue where the font is not being applied to the text and buttons in antd 5.
Can anyone help me troubleshoot this problem?