Google Fonts local, Dev / Build

sage
,
1

Hej,

I use Sage10 with current Bud.js and Tailwind.

I installed google font in folder /resources/fonts.

On Build works fine, no error.

On dev, Fonts not included, Error Console = 404 (Not Found).

My Bud.js looks

export default async (app) => {
  app
    /**
     * Application entrypoints
     */
    .entry({
      app: ["@scripts/app", "@styles/app"],
      editor: ["@scripts/editor", "@styles/editor"],
    })

    .tap(({ build }) => {
      build.rules.font.setUse([]);
      build.rules.font.setType("asset/resource");
    })

    /**
     * Directory contents to be included in the compilation
     */
    .assets(["images", "fonts"])

    /**
     * Matched files trigger a page reload when modified
     */
    .watch(["resources/views/**/*", "app/**/*"])

    /**
     * Proxy origin (`WP_HOME`)
     */
    .proxy("http://wpdemo.test")

    /**
     * Development origin
     */
    .serve("http://0.0.0.0:3000")

    /**
     * URI of the `public` directory
     */
    .setPublicPath("/app/themes/wpdemo/public/")

    /**
     * Generate WordPress `theme.json`
     *
     * @note This overwrites `theme.json` on every build.
     */
    .wpjson.settings({
      color: {
        custom: false,
        customGradient: false,
        defaultPalette: false,
        defaultGradients: false,
      },
      custom: {
        spacing: {},
        typography: {
          "font-size": {},
          "line-height": {},
        },
      },
      spacing: {
        padding: true,
        units: ["px", "%", "em", "rem", "vw", "vh"],
      },
      typography: {
        customFontSize: false,
      },
    })
    .useTailwindColors()
    .useTailwindFontFamily()
    .useTailwindFontSize()
    .enable();
};

My CSS

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';



@font-face {
    font-family: 'Arbutus';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url('~@fonts/arbutus-v24-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Arbutus'),
         url('~@fonts/arbutus-v24-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('~@fonts/arbutus-v24-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('~@fonts/arbutus-v24-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('~@fonts/arbutus-v24-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('~@fonts/arbutus-v24-latin-regular.svg#Arbutus') format('svg'); /* Legacy iOS */
  }

Somebody any idea?

regards
Andreas

2

for me i just make

.assets('images')

and it is work

and try without your .tap

3

Also in yarn dev mode? Sage 10?

4

“Also in yarn dev mode? Sage 10?”

Yes

5

Solved this way by using the same local dev domain (valet)

/**
     * Development origin
     */
    .serve("http://wpdemo.test:3000")