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 ?
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.