Can't import fontawesome-webfont typography

Question

I am trying to import a font (fontawesome version 4.4.0's webfont) I have located in a directory called 'fonts' inside my project:

I have read several StackOverflow posts and I'm trying to import it using @font-face inside css:

@font-face {
    font-family: 'MyWebFont';
    src: url('../fonts/fontawesome-webfont.eot');
    src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/fontawesome-webfont.woff2') format('woff2'),
         url('../fonts/fontawesome-webfont.woff') format('woff'),
         url('../fonts/fontawesome-webfont.ttf') format('truetype'),
         url('../fonts/fontawesome-webfont.svg#svgFontName') format('svg');
}

And then using it in the body:

body {
    margin: 0;
    padding: 0;
    font-family: 'MyWebFont';
}

However, it's not loading:

Any idea on why is this happening? I can actually see the expected font inside the files...

Thank you in advance.

Edit:

In the network tab in my browser's developer tools I can see the follwing info:

.

In the 'Response' tab inside Network, I get "failed to load response data". Maybe the problem is there?

Edit2:

Other fonts are being loaded just fine. For example, 'Raleway' (which is very similar, but not exactly the same. Notice the difference in the 'l'):

I am trying to get this font (I think it's Adobe's 'Proxima Nova', the same used in Fontawesome's site, that's the reason of the name)...

First step is to check the network tab in your browser's developer tools, and verify that the path is valid. If you're serving this from a webserver, you also need to verify that it's setup to serve these types of files (older versions of IIS or Apache, for example, aren't configured for some of those MIME types). — Tieson T.
@TiesonT. I have edited the post. I think the font is loading properly, although I'm not getting any response data. — Gerard
What exactly are you trying to do? Font Awesome is for rendering specific glyphs, using CSS classes. It isn't meant to be a "body" font. — Tieson T.
@TiesonT. That's the thing. I am really confused. I thought fontawesome was only for icons, but apparently, I have a deliverable assignment that is using the fonts I have listed in the folder. However, let's not think about them as 'FontAwesome', but just as custom fonts (let's ignore the name). I still can't figure out why aren't they working. — Gerard
Not exactly sure what you mean by "Raleway is similar" - Font Awesome doesn't define alpha or numeric characters in it's typeface. What you're seeing in the preview pane is likely Segoe UI, the default system font for Windows. The browser is likely displaying it's default font as a fallback. You could test that by setting it to something obviously different. — Tieson T.

NonStopGreen NonStopGreen · Accepted Answer · 2020-07-22T11:17:22

I think the problem is that font awesome is only for icons, not text.

If you go to fontawesome.com and remove this line of code:

.fa, .fas {
  font-family: "Font Awesome 5 Pro";
}

You will see all the icons that have the class fa and fas will be just a rectangle.

You also need to give every element other fonts like:

.fab {
    font-family: "Font Awesome 5 Brands";
}

.fa, .far, .fas {
    font-family: "Font Awesome 5 Free";
}

Can't import fontawesome-webfont typography

1 Answers