Adding Analytics wrecks Fonts

Keltin42 commented 1 year ago

I have a simple next.js /app setup. I am using google fonts following the guidance in the docs.

import { Odibee_Sans, Ubuntu } from '@next/font/google';
import GridHeader from './GridHeader';
import styles from './globals.css';
import GridRightHeader from './GridRightHeader';
import Footer from './footer';
import ScrollToTop from '@/components/ScrollToTop';

const obidee_sans = Odibee_Sans({
    subsets: ['latin'],
    weight: ['400'],
    variable: '--font-obidee-sans',
    display: 'optional',
});

const ubuntu = Ubuntu({
    subsets: ['latin'],
    weight: ['400'],
    variable: '--font-ubuntu',
    display: 'optional',
});

export default function RootLayout({ children }) {
    return (
        <html lang="en" className={`${obidee_sans.variable} ${ubuntu.variable}`}>
            {/*
        <head /> will contain the components returned by the nearest parent
        head.jsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
      */}
            <head />
            <body>
                <div className="app_grid" id="root">
                    <ScrollToTop />
                    <GridHeader />
                    <GridRightHeader />
                    <div id="app_grid_content" className="app_grid_content">
                        {children}
                        <Footer />
                    </div>
                </div>
            </body>
        </html>
    );
}

I added Analytics to my project, but the moment I add it to my layout, the fonts stop loading.


import { Analytics } from '@vercel/analytics/react';
import { Odibee_Sans, Ubuntu } from '@next/font/google';
import GridHeader from './GridHeader';
import styles from './globals.css';
import GridRightHeader from './GridRightHeader';
import Footer from './footer';
import ScrollToTop from '@/components/ScrollToTop';

const obidee_sans = Odibee_Sans({
    subsets: ['latin'],
    weight: ['400'],
    variable: '--font-obidee-sans',
    display: 'optional',
});

const ubuntu = Ubuntu({
    subsets: ['latin'],
    weight: ['400'],
    variable: '--font-ubuntu',
    display: 'optional',
});

export default function RootLayout({ children }) {
    return (
        <html lang="en" className={`${obidee_sans.variable} ${ubuntu.variable}`}>
            {/*
        <head /> will contain the components returned by the nearest parent
        head.jsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
      */}
            <head />
            <body>
                <div className="app_grid" id="root">
                    <ScrollToTop />
                    <GridHeader />
                    <GridRightHeader />
                    <div id="app_grid_content" className="app_grid_content">
                        {children}
                        <Footer />
                        <Analytics />
                    </div>
                </div>
            </body>
        </html>
    );
}
`

That's literally the only change in my project.  You can just add/remove the Analytics call and the fonts flip back and forth.  Any idea what is going on?  I'm literally just following the docs for both fonts and analytics, but you put them together and it ain't no worky.

tobiaslins commented 1 year ago

Hey! Have you tried it adding it before the closing </body>? Let me know if that helps :)

export default function RootLayout({ children }) {
    return (
        <html lang="en" className={`${obidee_sans.variable} ${ubuntu.variable}`}>
            {/*
        <head /> will contain the components returned by the nearest parent
        head.jsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
      */}
            <head />
            <body>
                <div className="app_grid" id="root">
                    <ScrollToTop />
                    <GridHeader />
                    <GridRightHeader />
                    <div id="app_grid_content" className="app_grid_content">
                        {children}
                        <Footer />

                    </div>
                </div>
                <Analytics />
            </body>
        </html>
    );
}

Keltin42 commented 1 year ago

doh! that totally fixed it. thank you! :)

I don't know why I fixated on the "add it after {children}" instead of "add it right before </body>". Not enough caffeine methinks.

Thank you very much, sorry to bother you with something so simple! :)

tobiaslins commented 1 year ago

It shouldn't break because of that tho, we'll investigate. Thanks for raising that and happy that it works now :)

Keltin42 commented 1 year ago

Ok, that isn't a 100% fix. If I reload the page, the fonts work. But if I navigate from page to page the fonts suddenly stop working. If I reload the page it fixes again ... until I navigate around.

tobiaslins commented 1 year ago

Hey @Keltin42 I'm not sure if the <Analytics/> component component can cause that behaviour. Do you have a deployment URL where we can reproduce this? What next.js version are you using?

Keltin42 commented 1 year ago

Ok, I tried a preview deployment and I don't see the issue, but I do still see it in when I run on localhost. You can see both browsers here, look at the "ROAR!" title.

Preview Deployment (with this change): https://roar-stage.keltin.net/

Production build (without this change, and back at 13.1 I think, I upgraded everything this morning hoping to fix this issue): https://roar.keltin.net

package.json

{
  "name": "roar-web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@next/font": "13.3.4",
    "@vercel/analytics": "^1.0.1",
    "eslint": "8.39.0",
    "eslint-config-next": "13.3.4",
    "firebase-admin": "^11.5.0",
    "next": "13.3.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-modal": "^3.16.1",
    "react-select": "^5.7.0"
  }
}

What I see in the debugger is that the css variable definitions (shown here) disappear.

Ok, this is driving me nuts, because as soon as I popped open the debugger to grab a screenshot of them missing, the fonts fixed themselves again. It's like the analytics events are sometimes destroying/blocking those two css variables.

Keltin42 commented 1 year ago

Upgraded to 13.4.1 this morning and it seems to be resolved. I literally haven't changed anything else since, so I'm still not sure what was conflicting, but it doesn't seem to be an issue now.

vercel / analytics

Adding Analytics wrecks Fonts #78