title: Google Fonts not loading in Next.js when deployed to Vercel
body: <p>When running the app in <code>http://localhost:3000</code> everything works and looks great. But upon deploying my Next.js app to Vercel, the fonts aren't showing and nothing comes up in the logs.</p>
  <p>I followed the recommendation in the Next.js docs and this is what my <code>_document.tsx</code> looks like -</p>
  <pre><code>import { Global } from '@mantine/core'
  import { createGetInitialProps } from '@mantine/next'
  import Document, { Head, Html, Main, NextScript } from 'next/document'
  
  const getInitialProps = createGetInitialProps()
  
  export default class _Document extends Document {
      static getInitialProps = getInitialProps
  
      render() {
          return (
              &lt;Html&gt;
                  &lt;Head&gt;
                      &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot; /&gt;
                      &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossOrigin=&quot;true&quot; /&gt;
                      &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Bebas+Neue&amp;family=Lora:ital@0;1&amp;family=Roboto+Condensed:wght@300;700&amp;display=swap&quot; rel=&quot;stylesheet&quot; /&gt;
                      &lt;Global
                          styles={(theme) =&gt; ({
                              'body': {
                                  backgroundColor: theme.colors.gray[3],
                                  color: theme.colors.gray[8],
                                  fontFamily: '\'Roboto Condensed\', sans-serif',
                              },
                              '.primary-text': {
                                  fontFamily: '\'Bebas Neue\', sans-serif',
                              },
                              '.secondary-text': {
                                  fontFamily: '\'Lora\', serif',
                              },
                          })}
                      /&gt;
                  &lt;/Head&gt;
                  &lt;body&gt;
                      &lt;Main /&gt;
                      &lt;NextScript /&gt;
                  &lt;/body&gt;
              &lt;/Html&gt;
          )
      }
  }
  </code></pre>
  <p>Any insight will do... help?
  Thanks!</p>