CODEWITHSUNDEEP
cssfont-facefont-awesome
Depressio
Depressio

Reputation: 1379

FontAwesome not available as a font-family?

This is undoubtedly me doing something really dumb, but I can't see it. I'm trying to use FontAwesome as a font-family in my css, but it doesn't seem to be working.

With minimal code, I have:

<head>
    <link href="assets/css/font-awesome.css" rel="stylesheet">
    <style>
        body {
            font-family: FontAwesome;
        }
    </style>
</head>
<body>
    Test FontAwesome!
</body>

This is showing up as clearly Times New Roman.

The FontAwesome font itself is stored in assets/font/, and font-awesome.css has the following @font-face defined:

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot?v=3.0.1');
  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Changing the .. to assets gives an obvious error that it can't find the font, so I'm pretty sure the relative pathing is just fine and dandy. If I change it to font-family: FontAwesome,Arial;, it uses Arial. Clearly, it can't find FontAwesome and I don't know why.

Any particular reason why I'm not able to change my body font to FontAwesome?

Upvotes: 8

Views: 49782

Answers (7)

BlueEyesWhiteDragon
BlueEyesWhiteDragon

Reputation: 427

You are listing relative path, sometimes they cause unexpected issues due to spelling errors. I can't count how many times I have messed up the link by actually having a folder called fonts instead of font.

Try Yovav's answer (https://stackoverflow.com/a/28556064/3616018) (below) to see if that clears the issue up if not, try using absolute paths instead or make sure the links are correct.

If you are struggling with local font-face, you can try a "remote" font-face via cdn (has benefit of maybe being cached already by the browser from other sites)

// Swap http for https if required.

@font-face {
    font-family: "FontAwesome";
    font-weight: normal;
    font-style : normal;
           src : url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
           src : url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
                 url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
                 url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
                 url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
                 url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
}

Upvotes: 8

Harvey Mushman
Harvey Mushman

Reputation: 680

I was unable to get this working until I added the word "before" to the style name. That fixed it for me!

.myClass:before {
    font-family: FontAwesome;
    content: "\f024";
}

Upvotes: 2

Yovav
Yovav

Reputation: 2787

Make sure both .woff and .woff2 are recognized by the server...

Add this in web.config at the element:

<staticContent>
  <remove fileExtension=".woff" />
  <remove fileExtension=".woff2" />
  <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
  <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>

Upvotes: 7

MatTheCat
MatTheCat

Reputation: 18751

FontAwesome characters are icons stored in Unicode's private use area only, so if your text doesn't use these characters you can't see the font.

Try &#xF00C;.

Upvotes: 0

Friede Petr
Friede Petr

Reputation: 805

Much better is use this:

<head>

<!-- fonts awesome -->

<link href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet' type='text/css'>

</head>

In your stylesheet use only for example: 

#post-title a:before {

    font-family: FontAwesome;
    content: "\f0c4";

}

No less, no more :))))

Upvotes: 10

Sandeep Pattanaik
Sandeep Pattanaik

Reputation: 632

you are write Wrong: font-family: FontAwesome;

Please write like this. font-family:'FontAwesome';

I think this will help u, because I had the same problem before one month.

Upvotes: 0

Jay
Jay

Reputation: 20146

The first question that needs to be answered is what web browser are you using. Not all browsers support custom fonts. Some do, but only with extra hacked up CSS/HTML.

I recommend testing it out first in Chrome (it seems to have the best font support).

Upvotes: 0

Related Questions