Search code examples
cssimportfontsastrojs

Custom local fonts not loading in AstroJS project

I have a problem where my fonts are not displayed after I've installed them in my project, maybe somebody can pinpoint the error I made. Here is how I do it:

main.scss file in src/styles

@font-face {
  font-family: 'Morganite';
  src: url('/fonts/Morganite.ttf') format('ttf');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('/fonts/Outfit.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

I'm importing this file in my Base.astro as follows:

---
const data = Astro.props
import '../../styles/main.scss';
---

Then in my styles I call them like this:

    h1 {
        font-family: 'Morganite', sans-serif;
        font-size: 40px;
    }

I have the files Outfit.woff2 and Morganite.ttf in my public/fonts folder. The other styles from the main.scss get applied correctly.

I don't get an error in my console, it just seems to ignore the font. What am I missing?

Thanks!

Solution

  • The mistake happened somewhere with the font files themselves. The ttf files were not rendered (I'm still unsure why) and there went something wrong with the conversion to woff and woff2. If you run into the same problem, try to convert your font files again and replace.