Sage 10/Bud CSS bug? Or what am I doing wrong?

bud
1

Hi all,

I have some custom woff2 fonts loaded in /resources/fonts in a sage 10 project.

In a css file I have:

@font-face {
    font-family: 'Luxia';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('@fonts/Luxia-Display.woff2') format('woff2');
}

The fonts doesn’t load and when i check the compiled css I see:


@font-face {
    font-display: swap;
    font-family: Luxia;
    font-style: normal;
    font-weight: 900;
    src: url(/app/themes/sage/public/fonts/Luxia-Display.f11d1d.woff2) format("woff2")
}

Swapping ‘@fonts’ to ‘…/fonts’ compiles the same.

Am I doing something stupid?

Cheers.

2

Are you using CSS or Sass?

If the latter:

url(~@fonts/muh-font.woff)
1 Like
3

I’m just using plain css. Following setup documented here: How to Setup Fonts | Sage Docs | Roots

My package.json.

  "devDependencies": {
    "@roots/bud": "6.20",
    "@roots/bud-tailwindcss": "6.20",
    "@roots/bud-vue": "6.20",
    "@roots/sage": "6.20"
  },
  "dependencies": {
    "alpinejs": "^3.13.3",
    "axios": "^1.6.2",
    "primevue": "^3.44.0"
  }
4

For now, i’m doing this as a quick fix. Will get an rewrite rule for this later if I can’t fix it.


function temp_roots_fix()
{
    global $wp;
    $params = $wp->query_vars;
    if (in_array('app', array_keys($params))) {
        $params = explode('themes/sage/public/', $params['app']);
        if (!isset($params[1])) {
            status_header(404);
            nocache_headers();
            echo "404";
            die();
        }
        
        $file = get_template_directory() . '/public/' . $params[1];
        //check if file exists
        if (file_exists($file)) {
            $filetype = wp_check_filetype($file);
            $mime_type = $filetype['type'];
            //get the file extension
            $extension = strtolower(substr(strrchr($file, '.'), 1));
            switch ($extension) {
                case "css":
                    $mimetype = "text/css";
                    break;
                case "js":
                    $mimetype = "text/javascript";
                    break;
                case 'woff2':
                    $mimetype = "font/woff2";
                    break;
                default:
                    $mimetype = "text/html";
                    break;
            }
            header("Content-type: " . $mimetype);
            readfile($file);
            exit;
        } else {
            status_header(404);
            nocache_headers();
            echo "404";
            die();
        }
    }
}

add_rewrite_endpoint('app', EP_ROOT);
add_action('template_redirect', 'App\temp_roots_fix');
5

Is /app/themes/sage/public/ your public path?

If not, change it in bud.config.js

1 Like
6

I knew I had to be stupid.

Thanks.

2 Likes