Google Fonts not working in production

Support
1

PLEASE help us help you by writing a good post!

I am using Google fonts on my site. They load fine in development but do not load on the deployed site.

I am loading them the same way I have in other projects deployed on Netlify

<style is:global>
  @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Righteous:wght@400;700&display=swap");

I have the fonts set up in Tailwind config

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  theme: {
    extend: {},
    fontFamily: { righteous: "Righteous", poppins: "Poppins" },
  },
  plugins: [],
}

I am invoking the font with the Tailwind class

<span
        class="md:pl-4 text-white font-righteous text-2xl md:text-4xl pt-[2px] px-1"
        >flashcardly</span
      >
2

@juju0010 Have you tried running your build command locally and then checked the result there?

3

The fix was to switch to using the @fontsource package recommended by Astro. Perhaps they’ve changed something since my last project.