2

I'm building an Astro Js project, I wan't to import a css file (for icons) from a dependency which include their own font files :

// @icons/dist/.../index.css
@font-face {
    font-family: "font name";
    src: url("./icons.ttf") format("truetype"),
url("./icons.woff") format("woff"),
url("./icons.woff2") format("woff2");
}

When building I have a replacement which is not including the font file in the dist folder, the compiled css :

@font-face {
    font-family: 'font name';
    src: url(__VITE_ASSET__e6e97650__$_?6cdb7df3dc807c5592752bbd5d1c724e__) format('truetype'),
        url(__VITE_ASSET__bc194da8__$_?6cdb7df3dc807c5592752bbd5d1c724e__) format('woff'),
        url(__VITE_ASSET__c837e718__$_?6cdb7df3dc807c5592752bbd5d1c724e__) format('woff2');
}

Does anyone had this issue and know how to resolve it ?

Zoe
  • 27,060
  • 21
  • 118
  • 148
JuleZ
  • 216
  • 3
  • 11

1 Answers1

0

If icons.ttf is inside the public folder, the url should be: url("/icons.ttf")

Basically you need to remove the dot so it target the public folder instead of the folder where you have the CSS file.

Eloi
  • 323
  • 1
  • 7
  • 16
  • Unfortunately this doesn't work if you are deploying to a subfolder... :( – simon Jun 06 '22 at 02:19
  • You may want to edit the astro.config.mjs to `export default defineConfig({ site: "https://yourdomain.com/subfolder", });` – Eloi Jun 07 '22 at 11:45
  • that's the old syntax that won't work with newer Astro versions; but it doesn't work with the new style `export default defineConfig({site: "https://yourdomain.com/", base: "/subfolder/", ...}` syntax either. – simon Jun 07 '22 at 17:44