Fonts not loading properly

sage
1

Hi everyone, I’m trying to change fonts on my custom theme using sage 10.7.0.

/* open-sans-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('@fonts/open-sans-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-500 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('@fonts/open-sans-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-700 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('@fonts/open-sans-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

This is what I have in fonts.css (in styles/common). app.css is like this:

@import 'common/fonts.css';
/* stylelint-disable scss/at-rule-no-unknown */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    address {
        @apply not-italic;
    }

    /* Setting base for focus style */
    /* :is(a, button, input, textarea, summary,[tabindex="0"]) {
        @apply focus:outline-none ring-focusring ring-offset-2 ring-offset-white focus:ring-2
    } */

    /* Remove all animations and transitions
for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
}

@layer components {...}

In editor.css I only have this string @import 'common/fonts.css';
Obviously I have fonts in resources/fonts.
I run ‘yarn build’ command too.
Do you know how to solve this?

2

P.S.
The import was: @import 'common/fonts'; (without .css) but VS Code was not linking the file correctly. I tried anyway both and no one is properly working

3

Is this SCSS?

~@fonts/...

4

No, this is not SCSS. Anyway, I tried also that. Sorry, I forgot to mention that try.

5

See How to Setup Fonts | Sage Docs | Roots

What does “not loading properly” mean exactly?

Are they 404ing? If so, is your public path correct? What’s the 404 show?

Are they not showing up in the editor? If so, did you configure the editor to use the fonts per the guide?

6

I followed the guide. The only thing I have not done is to configure theme.json because it says is generated automatically by bud.
Not loading properly means that I don’t see text changing on the website.
On VS Code if I click on @fonts/open-sans-regular.woff2 will say it cannot be found. But, bud build recognize properly fonts in assets.
For the last two questions, can you please explain what are you talking about?

7

To to confirm, we’re only talking about fonts not showing up in the editor?

You must make the changes to the Tailwind config and Bud config as shown in the guide, and then run the build (which generates theme.json), in order for your fonts to be working in the editor. You could verify this by seeing that your theme.json file currently doesn’t reference your custom font, since you haven’t yet updated your Bud config per the guide.

9

This are the first rows of tailwind.config.js

/** @type {import('tailwindcss').Config} config */
const config = {
  content: ['./index.php', './app/**/*.php', './resources/**/*.{php,vue,js}'],
  theme: {
    fontFamily: {
        sans: 'Open Sans, sans-serif',
    },

What to do about Bud config? In the guide Bud is named only when talking about generating the theme.json file.

10

Your Tailwind config doesn’t match what’s in the guide, FYI

See the very bottom part of the guide for exactly what to add to your Bud config

...
    .wpjson
      .setOption('styles', {
        typography: {
          fontFamily: 'var(--wp--preset--font-family--sans)',
        },
      })
      .settings({
...

You will get this working if you follow the guide. I promise :smiley:

11

You are right, it worked. But, I haven’t changed that part because it says ’ theme.json can be configured for the new font’. So, I understood that theme.json would be like that after bud build. This is why I told you before ‘The only thing I have not done is to configure theme.json because it says is generated automatically by bud.’