0

The word "TWIST" in the hero section of this site: https://pretzelnight.com/ should have Pacifico font, but it is only loading sometimes (try refreshing to reproduce the problem). When I look at network requests, it seems like it's always downloading it, just not necessarily always loading it.

Using @next/font": "^13.1.4"

_app.tsx

import { ShopProvider } from '@/context/shopContext'
import '../styles/tailwind.css'
import type { AppProps } from 'next/app'
import { Montserrat, Pacifico } from '@next/font/google'

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

const pacifico = Pacifico({
  subsets: ['latin'],
  variable: '--font-pacifico',
  weight: ['400'],
})

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ShopProvider>
      <main
        className={`${montserrate.variable} ${pacifico.variable} font-sans`}
      >
        <Component {...pageProps} />
      </main>
    </ShopProvider>
  )
}

The relevant section in hero:

<h1 className="text-4xl font-semibold text-[#F15B50] lg:text-6xl">
     <span className="font-pacifico font-normal">TWIST</span> IT UP
</h1>

tailwind.config.js

const { fontFamily } = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-montserrat)', ...fontFamily.sans],
        pacifico: ['var(--font-pacifico)', ...fontFamily.serif],
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
  ],
}
mpc75
  • 937
  • 9
  • 22

1 Answers1

1

Font-display "optional"

Currently, you're allowing the browser to skip rendering with the custom font file

@font-face {
    font-family: __Pacifico_a032f9;
    font-style: normal;
    font-weight: 400;
    font-display: optional;
    src: url(/_next/static/media/c89cfa4ee44cbc90.woff2) format("woff2");
}

From smashing magazine: "Barry Pollard – A New Way To Reduce Font Loading Impact: CSS Font Descriptors"

The other option is to use font-display: optional. This option basically makes web fonts optional, or to put differently, if the font isn’t there by the time the page needs it, then it’s up to the browser to never swap it. With this option, we avoid both FOIT and FOUT by basically only using fonts that have already been downloaded.

Workarounds:

herrstrietzel
  • 11,541
  • 2
  • 12
  • 34