'Astro Js @font-face import build wrong replacement

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 ?

javascriptcssviteastrojsc#zedgraph


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Eloi

Related Questions