Can't embed woff2 font in Sage10

Hey all,

I’ve tried following the docs to include a Google Font inside the theme. Using @fonts/. But it throws and error:

✘  error
│
│  Can't resolve './base/fonts/@fonts/oxanium-v14-latin-regular.woff2' in './resources/styles'
│

I’ve updated an Sage 10 version of last year to v10.6.0 with Acorn 3. What I noticed is that the fonts are not copied from the resources to the public folder.

Hey @Tim

It looks like either the @fonts alias isn’t set up, or something else is affecting it.

Can you share your package.json, bud.config.js and a snippet of your CSS showing how you’re referencing the font src?

Hey Tom, sure.

package.json (yes, it’s needs cleaning up)

{
  "name": "my name",
  "private": true,
  "browserslist": [
    "extends @roots/browserslist-config"
  ],
  "engines": {
    "node": ">=16.0.0"
  },
  "type": "module",
  "scripts": {
    "first": "yarn install && composer update && yarn bud clean && yarn dev",
    "dev": "bud clean && bud dev",
    "build": "bud clean && bud build",
    "lint": "npm run lint:js && npm run lint:css",
    "lint:js": "eslint resources/scripts --fix",
    "lint:css": "stylelint \"resources/**/*.{css,scss,vue}\" --fix",
    "translate": "npm run translate:pot && npm run translate:js",
    "translate:pot": "wp i18n make-pot . ./resources/lang/ratata.pot --ignore-domain --include=\"app,resources\"",
    "translate:js": "wp i18n make-json ./resources/lang --pretty-print",
    "pot": "mkdir -p ./resources/lang && find ./resources ./app -iname '*.php' | xargs xgettext --add-comments=TRANSLATORS --force-po --from-code=UTF-8 --default-domain=de_DE -k__ -k_e -k_n:1,2 -k_x:1,2c -k_ex:1,2c -k_nx:4c,12 -kesc_attr__ -kesc_attr_e -kesc_attr_x:1,2c -kesc_html__ -kesc_html_e -kesc_html_x:1,2c -k_n_noop:1,2 -k_nx_noop:3c,1,2, -k__ngettext_noop:1,2 -o resources/lang/ratata.pot && find ./resources -iname '*.blade.php' | xargs xgettext --language=Python --add-comments=TRANSLATORS --force-po --from-code=UTF-8 --default-domain=de_DE -k__ -k_e -k_n:1,2 -k_x:1,2c -k_ex:1,2c -k_nx:4c,12 -kesc_attr__ -kesc_attr_e -kesc_attr_x:1,2c -kesc_html__ -kesc_html_e -kesc_html_x:1,2c -k_n_noop:1,2 -k_nx_noop:3c,1,2, -k__ngettext_noop:1,2 -j -o resources/lang/ratata.pot",
    "translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang"
  },
  "devDependencies": {
    "@alpinejs/intersect": "^3.12.1",
    "@barba/core": "^2.9.7",
    "@barba/css": "^2.1.15",
    "@roots/bud": "6.12.2",
    "@roots/bud-postcss": "6.12.2",
    "@roots/bud-prettier": "6.12.2",
    "@roots/bud-purgecss": "6.12.2",
    "@roots/bud-sass": "6.12.2",
    "@roots/bud-tailwindcss": "6.12.2",
    "@roots/sage": "6.12.2",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "alpinejs": "^3.12.1",
    "animate.js": "^2.0.2",
    "animejs": "^3.2.1"
  },
  "dependencies": {
    "@alpinejs/persist": "^3.12.1",
    "caniuse-lite": "^1.0.30001489"
  }
}

bud.config.js

/**
 * Compiler configuration
 *
 * @see {@link https://roots.io/docs/sage sage documentation}
 * @see {@link https://bud.js.org/guides/configure bud.js configuration guide}
 *
 * @param {import('@roots/bud').Bud} app
 */
export default async (app) => {
  /**
   * Application assets & entrypoints
   *
   * @see {@link https://bud.js.org/docs/bud.entry}
   * @see {@link https://bud.js.org/docs/bud.assets}
   */
  app
    .entry('app', ['@scripts/app', '@styles/app'])
    .entry('editor', ['@scripts/editor', '@styles/editor'])
    .assets(['images']);

  /**
   * Set public path
   *
   * @see {@link https://bud.js.org/docs/bud.setPublicPath}
   */
  app.setPublicPath('/app/themes/sage/public/');

  /**
   * Development server settings
   *
   * @see {@link https://bud.js.org/docs/bud.setUrl}
   * @see {@link https://bud.js.org/docs/bud.setProxyUrl}
   * @see {@link https://bud.js.org/docs/bud.watch}
   */
  app
    .setUrl('http://localhost:3000')
    .setProxyUrl('http://example.test')
    .watch(['resources/views', 'app']);

  /**
   * Generate WordPress `theme.json`
   *
   * @note This overwrites `theme.json` on every build.
   *
   * @see {@link https://bud.js.org/extensions/sage/theme.json}
   * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json}
   */
  app.wpjson
    .set('settings.color.custom', false)
    .set('settings.color.customDuotone', false)
    .set('settings.color.customGradient', false)
    .set('settings.color.defaultDuotone', false)
    .set('settings.color.defaultGradients', false)
    .set('settings.color.defaultPalette', false)
    .set('settings.color.duotone', [])
    .set('settings.custom.spacing', {})
    .set('settings.custom.typography.font-size', {})
    .set('settings.custom.typography.line-height', {})
    .set('settings.spacing.padding', true)
    .set('settings.spacing.units', ['px', '%', 'em', 'rem', 'vw', 'vh'])
    .set('settings.typography.customFontSize', false)
    .useTailwindColors()
    .useTailwindFontFamily()
    .useTailwindFontSize()
    .enable();
};

oxanium.scss

/* oxanium-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oxanium';
  font-style: normal;
  font-weight: 400;
  src: url('@fonts/oxanium-v14-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
  url('@fonts/oxanium-v14-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* oxanium-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oxanium';
  font-style: normal;
  font-weight: 700;
  src: url('@fonts/oxanium-v14-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
  url('@fonts/oxanium-v14-latin-700.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

part of tailwind.config.js

const config = {
  content: ['./index.php', './app/**/*.php', './resources/**/*.{php,vue,js}'],
  theme: {
    extend: {
      colors: {}, // Extend Tailwind's default colors
      fontFamily: {
        sans: 'Oxanium, sans-serif',
      },
    },

Great, thanks. LGTM, except…

url() in SASS is relative to the target, and doesn’t support rewriting URLs.

I don’t use SASS with Tailwind (check out why…), but I think you may have to switch to ~, or an absolute or relative path rather than an alias, as described in the first link.

oh, I see I should have added .assets(['images', 'fonts']); to bud config. Now the fonts ARE in the public folder.

Thanks Tom! That’s right! It solved the problem. Using the tilde, right in front of ~@font.. The combination of the two removed the error.

So:

  src: url('~@fonts/oxanium-v14-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */

Maybe a little note to the admins to refer to this doc from the Font setup page?

1 Like

Good point Tim, I’ve raised a PR for the docs.