7 replies

Next font sever/client mismatch in app dir

Hi trying to include a style tag which sets css vars based on next font but get the following error

Text content did not match. Server: ":root {
    --font-p: &#x27;__Montserrat_656221&#x27;, &#x27;__Montserrat_Fallback_656221&#x27;;
}" Client: ":root {
    --font-p: '__Montserrat_656221', '__Montserrat_Fallback_656221';
}"
    at style
    at body
    at html
    at RedirectErrorBoundary 
    ...
    at Router (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:90:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:62:9)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:87:11)
    at AppRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:372:13)
    at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:154:11)
    at RSCComponent
    at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:171:11)

Text content did not match. Server: ":root {
    --font-p: &#x27;__Montserrat_656221&#x27;, &#x27;__Montserrat_Fallback_656221&#x27;;
}" Client: ":root {
    --font-p: '__Montserrat_656221', '__Montserrat_Fallback_656221';
}"
    at style
    at body
    at html
    at RedirectErrorBoundary 
    ...
    at Router (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:90:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:62:9)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:87:11)
    at AppRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:372:13)
    at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:154:11)
    at RSCComponent
    at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:171:11)

seems likes next font is adding ' on the server, tried logging it but didn't appear in logs ty for any help

here is the layout.tsx (root layout)

import { Montserrat } from 'next/font/google'

const font_p = Montserrat({
    subsets: ['latin'],
    variable: '--font-p',
})

const var_styles = `:root {
    --font-p: ${font_p.style.fontFamily};
}`

export default async function RootLayout({ children }: {children: React.ReactNode,}) {

    return <html lang="en">

        <body className={`${font_p.variable}`}>

            <style>{var_styles}</style>
            
            {children}
        </body>

    </html>
}

import { Montserrat } from 'next/font/google'

const font_p = Montserrat({
    subsets: ['latin'],
    variable: '--font-p',
})

const var_styles = `:root {
    --font-p: ${font_p.style.fontFamily};
}`

export default async function RootLayout({ children }: {children: React.ReactNode,}) {

    return <html lang="en">

        <body className={`${font_p.variable}`}>

            <style>{var_styles}</style>
            
            {children}
        </body>

    </html>
}

Solution

It looks like it’s encoding the

. What happens if you dangerously set html for var styles

Jump to solution

Next font sever/client mismatch in app dir

Hi trying to include a style tag which sets css vars based on next font but get the following error

Text content did not match. Server: ":root {
    --font-p: &#x27;__Montserrat_656221&#x27;, &#x27;__Montserrat_Fallback_656221&#x27;;
}" Client: ":root {
    --font-p: '__Montserrat_656221', '__Montserrat_Fallback_656221';
}"
    at style
    at body
    at html
    at RedirectErrorBoundary 
    ...
    at Router (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:90:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:62:9)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:87:11)
    at AppRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:372:13)
    at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:154:11)
    at RSCComponent
    at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:171:11)

Text content did not match. Server: ":root {
    --font-p: &#x27;__Montserrat_656221&#x27;, &#x27;__Montserrat_Fallback_656221&#x27;;
}" Client: ":root {
    --font-p: '__Montserrat_656221', '__Montserrat_Fallback_656221';
}"
    at style
    at body
    at html
    at RedirectErrorBoundary 
    ...
    at Router (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:90:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:62:9)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:87:11)
    at AppRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:372:13)
    at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:154:11)
    at RSCComponent
    at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:171:11)

seems likes next font is adding ' on the server, tried logging it but didn't appear in logs ty for any help

here is the layout.tsx (root layout)

import { Montserrat } from 'next/font/google'

const font_p = Montserrat({
    subsets: ['latin'],
    variable: '--font-p',
})

const var_styles = `:root {
    --font-p: ${font_p.style.fontFamily};
}`

export default async function RootLayout({ children }: {children: React.ReactNode,}) {

    return <html lang="en">

        <body className={`${font_p.variable}`}>

            <style>{var_styles}</style>
            
            {children}
        </body>

    </html>
}

import { Montserrat } from 'next/font/google'

const font_p = Montserrat({
    subsets: ['latin'],
    variable: '--font-p',
})

const var_styles = `:root {
    --font-p: ${font_p.style.fontFamily};
}`

export default async function RootLayout({ children }: {children: React.ReactNode,}) {

    return <html lang="en">

        <body className={`${font_p.variable}`}>

            <style>{var_styles}</style>
            
            {children}
        </body>

    </html>
}

Solution

It looks like it’s encoding the

. What happens if you dangerously set html for var styles

Jump to solution

Next font sever/client mismatch in app dir

Next font sever/client mismatch in app dir

Similar Threads

Similar Threads

Similar Threads