emfpc's avatar
Level 1

Calling Fonts using Laravel Mix

My web application uses font's that are in a folder located in the resources dir. Bootstrap and Javascripts are in the same resource dir and works good in laravel mix but i get errors when it tries to display the font of the theme.

Laravel Mix:

mix.styles(
    [
        "resources/asset/vendor/bootstrap/css/bootstrap.min.css",
        "resources/asset/libs/css/style.css",
        "resources/asset/vendor/fonts/fontawesome/css/fontawesome-all.css",
        "resources/asset/vendor/fonts/circular-std/style.css"
    ],
    "public/css/style.css"
);

Error in inspector:

downloadable font: download failed (font-family: "Circular Std Book" style:normal weight:400 stretch:100 src index:1): status=2147746065 source: http://localhost:8000/css/CircularStd-Book.woff

And this is the style.css of the fonts:

/* #### Generated By: http://www.cufonfonts.com #### */

@font-face {
    font-family: "Circular Std Black";
    font-style: normal;
    font-weight: normal;
    src: local("Circular Std Black"),
        url("CircularStd-Black.woff") format("woff");
}

@font-face {
    font-family: "Circular Std Book";
    font-style: normal;
    font-weight: normal;
    src: local("Circular Std Book"), url("CircularStd-Book.woff") format("woff");
}

@font-face {
    font-family: "Circular Std Medium";
    font-style: normal;
    font-weight: normal;
    src: local("Circular Std Medium"),
        url("CircularStd-Medium.woff") format("woff");
}

@font-face {
    font-family: "Circular Std Black Italic";
    font-style: normal;
    font-weight: normal;
    src: local("Circular Std Black Italic"),
        url("CircularStd-BlackItalic.woff") format("woff");
}

@font-face {
    font-family: "Circular Std Bold";
    font-style: normal;
    font-weight: normal;
    src: local("Circular Std Bold"), url("CircularStd-Bold.woff") format("woff");
}

@font-face {
    font-family: "Circular Std Bold Italic";
    font-style: normal;
    font-weight: normal;
    src: local("Circular Std Bold Italic"),
        url("CircularStd-BoldItalic.woff") format("woff");
}

@font-face {
    font-family: "Circular Std Book Italic";
    font-style: normal;
    font-weight: normal;
    src: local("Circular Std Book Italic"),
        url("CircularStd-BookItalic.woff") format("woff");
}

@font-face {
    font-family: "Circular Std Medium Italic";
    font-style: normal;
    font-weight: normal;
    src: local("Circular Std Medium Italic"),
        url("CircularStd-MediumItalic.woff") format("woff");
}

thanks in advance

0 likes
1 reply
emfpc's avatar
emfpc
OP
Best Answer
Level 1

Found the issue 😊

Please or to participate in this conversation.