Font not loading in dev, after carefully following the docs | Astro Lounge | Page 1

red lark Oct 11, 2024, 10:57 PM

#

Hy guys. So, let's begin:
https://docs.astro.build/en/guides/fonts/#using-fontsource I follow the steps from here to install with fontsource (not my first time using this).
I've installed 2 fonts: "@fontsource/cormorant-garamond": "^5.1.0", "@fontsource/montserrat": "^5.1.0".
I have a Layout.astro, where I import these 2 fonts, and where I also followed fontsource guide to preload fonts, from astro docs:

See the Fontsource guide to preloading fonts for more information and usage.
https://fontsource.org/docs/getting-started/preload

Layout.astro:

import "@fontsource/montserrat";
import "@fontsource/cormorant-garamond";
import montserratWoff2 from "@fontsource/montserrat/files/montserrat-latin-400-normal.woff2";
import cormorantGaramondWoff2 from "@fontsource/cormorant-garamond/files/cormorant-garamond-latin-400-normal.woff2";

My tailwind config looks like this (installed with astro integration), and again respecting the docs. I want to make tailwind default font to cormorant garamond (again, not my first time doing this):

import defaultTheme from "tailwindcss/defaultTheme";

/** @type {import('tailwindcss').Config} /
export default {
content: ["./src/**/.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: {
extend: {
fontFamily: {
sans: [
'"Cormorant Garamond"',
'"serif"',
...defaultTheme.fontFamily.sans,
],
},
},
},
plugins: [],
};

I go in dev mode, in browser console (firefox) to check my font, and my used font is serif in case of cormorant, and sans-serif in case of montserat. So in both cases, the fallback fonts.Help

Preloading Fonts | Documentation | Fontsource

Download and self-host 1500+ open-source fonts in neatly bundled NPM packages. Access a comprehensive library of web typefaces for free.

Docs

Using custom fonts

Looking to add some custom typefaces to an Astro website? Use Google Fonts with Fontsource or add a font of your choice.

tidal steeple Oct 12, 2024, 1:06 AM

#

Hello, it was a little difficult to follow this issue at first.

Let me summarise what I understood 🙂

You want to make Cormorant-garamond the default font using Tailwind.
You are not able to load the fonts from fontsource: Montserrat and Cormorant-garamond.
You have followed the guide from astro docs.
In this guide, you have installed the fontsource fonts using npm.
It is not your first time installing fonts from fontsource in an astro project.

This is how you have implemented it in layout.astro :

---
import "@fontsource/montserrat";
import "@fontsource/cormorant-garamond";
import montserratWoff2 from "@fontsource/montserrat/files/montserrat-latin-400-normal.woff2";
import cormorantGaramondWoff2 from "@fontsource/cormorant-garamond/files/cormorant-garamond-latin-400-normal.woff2";
---

<html lang="ro">
  <head>
    <link
      rel="preload"
      as="font"
      type="font/woff2"
      href={montserratWoff2}
      crossorigin="anonymous"
    />
    <link
      rel="preload"
      as="font"
      type="font/woff2"
      href={cormorantGaramondWoff2}
      crossorigin="anonymous"
    />
  </head>
  <body>
    <slot />
  </body>
</html>

tidal steeple Oct 12, 2024, 1:22 AM

#

The implementation looks different from docs.

Here's what I would try instead: choose one option

Working. Option 1, use inline styles layout.astro

---
import "@fontsource/cormorant-garamond"
---
<html>
  <head>
    <style>
      body {
        font-family: 'Cormorant Garamond', serif;
      }
    </style>
  </head>
  <body>
    <slot />
  </body>
</html>

Working. Option 2, use tailwind and edit tailwind.config.mjs

import defaultTheme from 'tailwindcss/defaultTheme'

/** @type {import('tailwindcss').Config} */
export default {
    content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
    theme: {
      extend: {
        fontFamily: {
          serif: ['Cormorant Garamond', ...defaultTheme.fontFamily.serif],
          sans: ['Montserrat', ...defaultTheme.fontFamily.sans],
        },
      },
    },
    plugins: [],
}

Then, make sure to import the font.

layout.astro

---
import "@fontsource/cormorant-garamond"
import "@fontsource/montserrat"
---
...

Ensure the font is installed too:

npm install @fontsource/cormorant-garamond
npm install @fontsource/montserrat

My thoughts:
Seems like the wording on the docs may be confusing, and you followed the link suggesting to preload fonts. The implementation for preloading fonts is separate and different from using the font on your page 🙂

The getting started doc was what you needed.

#

Cormorant Garamond font

red lark Oct 12, 2024, 4:37 PM

#

Hey @tidal steeple . I tried that also before I've posted yesterday. My web font chosen in the browser is still serif, instead of cormorant

light steeple Oct 12, 2024, 4:42 PM

#

Or you could rather use https://github.com/rishi-raj-jain/astro-font

GitHub

GitHub - rishi-raj-jain/astro-font: `astro-font` will automatically...

astro-font will automatically optimize your Custom Fonts, Local Fonts, Fonts over any CDN and Google fonts for performance. - rishi-raj-jain/astro-font

red lark Oct 12, 2024, 4:45 PM

#

I want to config it in tailwind. I've done this before with sveltekit, it exaclty the same like i did here. Installed with font source, import in a layout file, the change the tailwind config like I wrote here, and it should work. For some reason, the fonts dont come. I even check my network tab, and there is not a single font file coming

#

I also checked the node_modules folder, and I have the fonts installed there, I also double check the imports, double checked for the "" for multi words font and everything I know

#

This is really frustrating...

fiery dagger Oct 12, 2024, 4:47 PM

#

I'm not seeing anything wrong here 🤔 I'm using the same setup as you (fontsource + tailwind) and everything works for me. Here's my repo in case you want to take a look https://github.com/Trombach/astro-homepage

GitHub

GitHub - Trombach/astro-homepage: My homepage written in Astro and ...

My homepage written in Astro and Svelte. Contribute to Trombach/astro-homepage development by creating an account on GitHub.

#

In the browser, can you see the preload links in your head? Do you maybe have multiple layout files and you're using the wrong one? Just throwing out ideas

red lark Oct 12, 2024, 4:48 PM

#

So that's exactly why I'm asking for help. I'm new here, I just joined last night. Can I get in touch with somebody from the support to help me?

fiery dagger Oct 12, 2024, 4:49 PM

#

You're already in touch 🙂

#

Astro is is a community project

red lark Oct 12, 2024, 4:49 PM

#

there is not a single preload link in the browser. I only have 1 layout file, which is in the layout folder, and the pages folder, which has the index.astro

#

nothing else

astral dome Oct 12, 2024, 4:49 PM

#

Can you make a repro on stackblitz? Or a repo someone can clone?

fiery dagger Oct 12, 2024, 4:49 PM

#

Yeah, a minimal repro would be the next step

red lark Oct 12, 2024, 4:49 PM

#

Ok wait please. Just dont go:))

#

If i make a public github link is that ok?

fiery dagger Oct 12, 2024, 4:51 PM

#

Should be a good start

#

Easiest would be to put it on stackblitz.com

red lark Oct 12, 2024, 4:53 PM

#

https://github.com/catalinurcan9/tai-construct

GitHub

GitHub - catalinurcan9/tai-construct

Contribute to catalinurcan9/tai-construct development by creating an account on GitHub.

fiery dagger Oct 12, 2024, 4:53 PM

#

Ok I see the problem

#

you're not using your Layout component. You have to import it into the index.astro file and pass content in as children

red lark Oct 12, 2024, 4:54 PM

#

ohhh shiet...what a newbie mistake

#

omfg

#

omg

fiery dagger Oct 12, 2024, 4:54 PM

#

In sveltekit, the +layout files get added to your output automatically, but in astro there aren't really any special files

#

haha all good 🙂

red lark Oct 12, 2024, 4:55 PM

#

No they dont

#

You still need to use them

#

omg what an idiot i am:))

fiery dagger Oct 12, 2024, 4:55 PM

#

oh really? It's been a while since I've used sveltekit 😅

#

We've all been there. Welcome to webdev 🙂

red lark Oct 12, 2024, 4:56 PM

#

No way dude...it works...wasted like 15 hours for such a stupid mistake

#

thank you so much, the bear is on me my friend:P

#

beer*

fiery dagger Oct 12, 2024, 4:56 PM

#

Haha all good 🙂 Just happy you got it working!

limpid basinBOT Oct 12, 2024, 4:57 PM

#

If your issue is resolved, please help by doing the following two steps:

From the ellipses (3-dot menu) in the top-right corner of the post (not the first message), edit the tags to include the Solved tag.
From the same ellipses, select Close Post.
Your post will still be available to search and can be re-opened simply by replying in it. Closing a post moves it down with older posts, so we can more easily focus on issues that still need to be resovled.
Thank you for your help!

#Font not loading in dev, after carefully following the docs

import "@fontsource/montserrat"; import "@fontsource/cormorant-garamond"; import montserratWoff2 from "@fontsource/montserrat/files/montserrat-latin-400-normal.woff2"; import cormorantGaramondWoff2 from "@fontsource/cormorant-garamond/files/cormorant-garamond-latin-400-normal.woff2";

Let me summarise what I understood 🙂

Here's what I would try instead: choose one option

import "@fontsource/montserrat";
import "@fontsource/cormorant-garamond";
import montserratWoff2 from "@fontsource/montserrat/files/montserrat-latin-400-normal.woff2";
import cormorantGaramondWoff2 from "@fontsource/cormorant-garamond/files/cormorant-garamond-latin-400-normal.woff2";