# Failing to find font files

**URL:** https://discourse.roots.io/t/failing-to-find-font-files/25027
**Category:** sage
**Tags:** sage10
**Created:** 2023-03-27T13:04:40Z
**Posts:** 5

## Post 1 by @meemal — 2023-03-27T13:04:40Z

Taking my first steps with sage 10 and tailwind. Following the documentation here - [How to Setup Fonts | Sage Docs | Roots](https://roots.io/sage/docs/fonts-setup/#add-the-css) - to load in a font, but getting an error message. Also, as I go through that help page there are a couple of unclear items that would be good to clear up.

First of all, here is my error message.

```
Failed to find 'common/fonts'
│ in [
│ ./resources/styles
│ ]
```

And here is the setup.  
Tailwind.config.cjs looks like:

```
// https://tailwindcss.com/docs/configuration
module.exports = {
  content: ['./index.php', './app/ **/*.php', './resources/** /*.{php,vue,js}'],
  theme: {
    extend: {
      colors: {
        'teal': '#005F72',
        'navy': '#25303B',
        'burntorange': '#A33216',
        'peach': '#FBD1C3',

      }, // Extend Tailwind's default colors
      fontFamily: {
        sans: ['Montserrat, sans-serif'],
      },
    },
  },
  plugins: [],
};
```

My app.css file looks like this :

```
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
/* FONTS */
@import 'common/fonts';
```

My styles/common/fonts.scss file looks like this

```
@font-face {
  font-display: swap;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 400;
  src: url('@fonts/Montserrat-Regular.woff2') format('woff2'),
}
//
@font-face {
  font-display: swap;
  font-family: 'ProximaNova', sans-serif;
  font-style: normal;
  font-weight: 400;
  src: url('@fonts/ProximaNova-Regular.woff2') format('woff2'),
}
```

**Question.**  
On the help document it advises you:

‘Define your `@font-face` in `styles/common/fonts.css` :’

So should I actually have created a .css file in here? I tried it but that also failed. But if this is actually supposed to be a css file here Im probably missing some quite fundamental understanding on how the whole thing hands together :woozy_face:

The other confusing item in the help is:

‘Configure `theme.json` to use the font’

But at the top of the theme.json file it says

’ “ **generated** ”: “:warning: This file is generated. Do not edit.”,’

So where should we edit the information which goes into this?

Any help much appreciated!

---

## Post 2 by @strarsis — 2023-03-27T13:29:06Z

This should help (also for fonts):

> [@[Tip] Bud alias (`bud.alias`) in SCSS (SASS)](https://discourse.roots.io/t/tip-bud-alias-bud-alias-in-scss-sass/24208):
>
> When using [bud.alias](https://bud.js.org/docs/bud.alias/) with SCSS (SASS) ([bud-sass](https://bud.js.org/extensions/bud-sass/)), you can use the alias functions by prefixing them with a tilde sign (~), like so (note: ~@images used in the example is a predefined alias [added by @roots/sage](https://bud.js.org/docs/bud.alias/#rootssage)): .test { background: url("~@images/background/test.jpg"); } Without that tilde sign (~) the path isn’t correctly interpolated when compiling the SCSS.

---

## Post 3 by @talss89 — 2023-03-27T13:34:26Z

Hi @meemal,

> [@meemal](#):
>
> On the help document it advises you:
> 
> ‘Define your `@font-face` in `styles/common/fonts.css` :’
> 
> So should I actually have created a .css file in here? I tried it but that also failed. But if this is actually supposed to be a css file here Im probably missing some quite fundamental understanding on how the whole thing hands together :woozy_face:

Sage 10 does not ship with SASS out of the box, and for Tailwind it’s not a requirement. I find that since moving to Sage 10, I’m happy to just work in plain CSS with postcss.

Your `common/fonts` file should be a `.css` file, unless you’ve set up SASS.

Hopefully, changing this file to `.css`, then running `yarn dev --force` should work. `--force` to force a full rebuild, just in case something is a bit wrong with the build cache. Once working, you can revert to `yarn dev`.

> [@meemal](#):
>
> The other confusing item in the help is:
> 
> ‘Configure `theme.json` to use the font’
> 
> But at the top of the theme.json file it says
> 
> ’ “ **generated** ”: “:warning: This file is generated. Do not edit.”,’
> 
> So where should we edit the information which goes into this?

I can see how the docs could be clearer here. `theme.json` is generated by Bud via `tailwind.config.cjs` out of the box, so as long as you’re calling `useTailwindFontFamily()` in `bud.config.js`, it should all just work. See your `.wpjson.settings` line in `bud.config.js` and check out [Managing theme.json | bud.js](https://bud.js.org/extensions/sage/theme.json)

@strarsis point is worth looking into if your issue is resolving the actual font files in SCSS, but I’m not 100% sure you are having that problem.

---

## Post 4 by @meemal — 2023-03-27T13:50:46Z

> [@talss89](#):
>
> Sage 10 does not ship with SASS out of the box, and for Tailwind it’s not a requirement. I find that since moving to Sage 10, I’m happy to just work in plain CSS with postcss.

:exploding_head: Hard to imagine using CSS without SASS but I’ll give it a whirl if that’s the **done** thing. Tried again using a CSS file and no error this time. Thank you for your input, much appreciated!

Great to understand how the information gets into theme.json too.

---

## Post 5 by @talss89 — 2023-03-27T13:56:15Z

Great! It took me a while to let go of SASS. But 9/10 times I feel the need to reach for it when using Tailwind, it means I’m ‘doing it wrong’.

IMO, it’s worth taking the time to get into the Tailwind mindset. This article helped me: [Using with Preprocessors - Tailwind CSS](https://tailwindcss.com/docs/using-with-preprocessors)