Google Fonts Font Doesn't Load

Google Fonts are not rendering on Google Chrome

Apparently it's a known Chrome bug. There's a css-only workaround that should solve the problem:

body {
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}

It seems like Chrome just needs to be told to repaint the text

Google Font Not Working With CSS?

Try to put your import on the top of your file, before any declaration.

tailwindcss google fonts isn't being loaded into stylesheet

You have a problem in your tailwind.config.js file,
the problem is that you have 2 'theme' properties in your file and your 'fontFamily' has to be located outside not in the 'exstend' property.

Your file should look like:

module.exports = {
    content: ["**/*.{html,js,php}"],
    theme: {
        colors: {
          'blue': '#1fb6ff',
          'purple': '#7e5bef',
          'pink': '#ff49db',
          'orange': '#ff7849',
          'green': '#13ce66',
          'yellow': '#ffc82c',
          'gray-dark': '#273444',
          'gray': '#8492a6',
          'gray-light': '#d3dce6',
        },
        fontFamily: {
            'heading': ['Quicksand', 'sans-serif', 'modern'],
            'flow': ['Quicksand', 'sans-serif'],
        },
        extend: {         
          spacing: {
            '8xl': '96rem',
            '9xl': '128rem',
          },
          borderRadius: {
            '4xl': '2rem',
          }
        }
    },
    corePlugins: {
      aspectRatio: false,
    },
    plugins: [
      require('@tailwindcss/line-clamp'),
      require('@tailwindcss/aspect-ratio'),
      require('@tailwindcss/typography'),
      require('@tailwindcss/forms'),
      require('tailwind-scrollbar-hide')
    ],
  }

---

Related Topics