custom font won't load when navigating through internal link #6760

amyming112 · 2024-09-02T12:42:24Z

amyming112
Sep 2, 2024

Dependencies check up

I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.12.2

What package has an issue?

@mantine/core

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

All

Describe the bug

I installed Mantine yesterday, and my header is built using tab and menu. when I load my page, my custom font will show, but if I navigate between pages using links (e.g. through the header), it will default to system font. Then custom font will show again when I refresh the page. This wasn't an issue before I installed Mantine.

I have installed the font in font.tsx in public folder, and configured the _app and globals and everything. and display is set to swap. the _app code is:

const theme = createTheme({
    fontFamily: "Montserrat, sans-serif",

    headings: {
        fontFamily: "Montserrat, sans-serif",
    },
});

export default function App({ Component, pageProps }: AppProps) {
    return (
        <MantineProvider theme={theme}>
            <Component {...pageProps} />
        </MantineProvider>
    );
}

For layout.tsx:

export const metadata: Metadata = {
    title: "Kodama Travel",
    description: "Book responsible and high-quality travel experiences.",
};

export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <html lang="en">
            <body className={`${montserrat.className} antialiased`}>
                {children}
            </body>
        </html>
    );
}

font import:

import { Montserrat } from "next/font/google";

export const montserrat = Montserrat({
    weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
    subsets: ["latin"],
    display: "swap",
});

thanks!

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

I would be willing to implement a fix for this issue

rtivital · 2024-09-02T13:13:56Z

rtivital
Sep 2, 2024
Maintainer

To load fonts in Next.js follow this guide – https://help.mantine.dev/q/next-load-fonts

1 reply

amyming112 Sep 4, 2024
Author

I figured this out - it seems if I navigate through say component={link} this will be an issue, but with component="a" this is not an issue. it seems any navigation through will link result in showing the system font. changing link to "a" seems to have resolved the problem!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mantine

custom font won't load when navigating through internal link #6760

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Mantine

custom font won't load when navigating through internal link #6760

amyming112 Sep 2, 2024

Dependencies check up

What version of @mantine/* packages do you have in package.json?

What package has an issue?

What framework do you use?

In which browsers you can reproduce the issue?

Describe the bug

If possible, include a link to a codesandbox with a minimal reproduction

Possible fix

Self-service

Replies: 1 comment · 1 reply

rtivital Sep 2, 2024 Maintainer

amyming112 Sep 4, 2024 Author

amyming112
Sep 2, 2024

Replies: 1 comment 1 reply

rtivital
Sep 2, 2024
Maintainer

amyming112 Sep 4, 2024
Author