Trying to add font to Astro/Tailwind project using FontSource. | Astro Lounge | Page 1

My dependencies looks like this...

  "dependencies": {
    "@astrojs/tailwind": "^3.1.2",
    "@fontsource/lato": "^4.5.10",
    "astro": "^2.4.5",
    "tailwindcss": "^3.3.2"
  }

My tailwind.config.cjs looks like this...

  theme: {
    extend: {
      colors: {
        'logo-blue': '#085dfe',
      },
      fontFamily: {
        'sans': ['Lato'],
      },
    },
  },

As I understand it, sans is the default font family in Astro so I think this should mean the Lato font gets used everywhere by default. However it does not. It is displaying some serif font. However the Chrome tools inspector shows that the font is indeed Lato.

I suspect that this means my Lato font is not getting loaded by the browser. Is this correct? What do I need to do?

#Trying to add font to Astro/Tailwind project using FontSource.

You need to import the font in the frontmatter of your page like ```jsx

import "@fontsource/lato"