Importing a css file (CDN vs Local)

Question

There's something strange about this.

If I use:

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

All works fine. But If I download it (i need to download to work offline) and then use (yes, the path is correct:

<link rel="stylesheet" href="../resources/css/lib/font_awesome/all.css">

I get

fa-solid-900.woff2 Failed to load resource: the server responded with a status of 404 (Not (Not Found) fa-solid-900.woff Failed to load resource: the server responded with a status of 404 (Not Found) fa-solid-900.ttf Failed to load resource: the server responded with a status of 404 (Not Found)

Why the cdn doesn't give me any error and the other does?

Web.xml

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.woff2</url-pattern>
</servlet-mapping>
<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.woff</url-pattern>
</servlet-mapping>
<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.ttf</url-pattern>
</servlet-mapping>

Answer 1

This is simply because the stylesheet uses relative paths to the fonts. You didn't download those fonts, just the stylesheet. Hence the fonts are not found on your system.

If you need the absolute font-face rules, here they are:

@font-face{
    font-family:Font Awesome\ 5 Brands;
    font-style:normal;
    font-weight:400;
    src:url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-brands-400.eot);
    src:url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-brands-400.woff2) format("woff2"),url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-brands-400.woff) format("woff"),url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-brands-400.ttf) format("truetype"),url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-brands-400.svg#fontawesome) format("svg")
}
@font-face{
    font-family:Font Awesome\ 5 Free;
    font-style:normal;
    font-weight:400;
    src:url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-regular-400.eot);
    src:url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-regular-400.woff2) format("woff2"),url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-regular-400.woff) format("woff"),url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-regular-400.ttf) format("truetype"),url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-regular-400.svg#fontawesome) format("svg")
}
@font-face{
    font-family:Font Awesome\ 5 Free;
    font-style:normal;
    font-weight:900;
    src:url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-solid-900.eot);
    src:url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-solid-900.woff2) format("woff2"),url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-solid-900.woff) format("woff"),url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-solid-900.ttf) format("truetype"),url(https://use.fontawesome.com/releases/v5.0.6/webfonts/fa-solid-900.svg#fontawesome) format("svg")
}

Answer 2

Fontawesome 5 is best used via the JS version - it give many many more options...

https://use.fontawesome.com/releases/v5.0.6/js/all.js

Or you can download the whole package and link to the relevant js file.