Failing to find font files

sage
1

Taking my first steps with sage 10 and tailwind. Following the documentation here - How to Setup Fonts | Sage Docs | Roots - 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!

2

This should help (also for fonts):

1 Like
3

Hi @meemal,

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.

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

@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.

1 Like
4

: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.

5

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

2 Likes