@font-face AwesomeFont doesn't work

Question

I've been looking through Search Q&A before asking my question but I didn't find any answers.

For my project I have to make a website, they gave me a folder "fonts" to download containing the fonts I need, I have 2 fonts, 'FontAwesome' and 'glyphicons-halflings' here's the code I wrote for these fonts:

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

@font-face 
{
    font-family: 'glyphicons-halflings-regular';
    src: url('fonts/glyphicons-halflings-regular.eot');
    src: url('fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/glyphicons-halflings-regular.woff') format('woff'),
         url('fonts/glyphicons-halflings-regular.ttf') format('truetype'),
         url('fonts/glyphicons-halflings-regular.svg#glyphicons-halflings-regular') format('svg');
         font-weight: normal;
         font-style: normal;
}

then I tried to use my fonts:

header h1
{
    font-family: 'FontAwesome';
}

When I tried to use FontAwesome, nothing changed the basic fonts remain, I also tried to use my second fonts 'glyphicons-halflings-regular' and with this fonts the basic fonts remain but there's more space between my words like this.

Here's a screenshot of my fonts folder, my stylesheet is in my folder 1-Projet so normally there's no problem for the URL, I also tried with someone to use the fonts with google link, but it didn't work.

Does anyone know where the problem come from?

small note on your CSS: we don't need all those rule anymore. For all modern browsers, including IE9 and up, all you need is WOFF (and the cutting edge ones support WOFF2). The other formats have been obsolete for a while (eot, svg) or are not meant for web deployment (ttf, otf). See [this SO answer](http://stackoverflow.com/questions/36105194/are-eot-ttf-and-svg-still-necessary-in-the-font-face-declaration/36110385#36110385) for more details. So: simplify your CSS and you rule out a large number of possible causes. Then you have a better problem to analyse. — Mike 'Pomax' Kamermans, Jan 21 '17 at 06:05

mrjamesmyers · Answer 1 · 2017-01-21T00:38:46.630

I would consider including font-awesome using library using CDN

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Then add your own CSS class something like .fa that just has font-family:FontAwesome

.fa {
    font-family: FontAwesome;
 }

then on your element you could add the font-awesome class for the particular icon you want e.g

<h1 class="fa fa-check fa tick"></h1>

Below is how we have implemented with extra CSS for our .fa class

But could have just like below

Font Awesome Icons displayed with HTML Code

== edit: example HTML for simple font awesome page, sopy below and save as a .html file and see if works for you as a starting point ==

<!doctype html>
<!--[if lte IE 8]> <html lang="en" class="ie-lte8"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <style>
        .fa {
            font-family: "FontAwesome";
        }
        </style>
</head>
<body>
<h1 class="fa fa fa-check fa-tick">This is font awesome</h1>
</body>
</html>

score 0 · Answer 2 · edited Jan 21 '17 at 06:07

thank you for your answer, i made a mistake on my post i said i used google link with my friend but it was this bootstrap link i used and it still didn't work, i also tried to use this class as you said and it didn't work, even though, when i inspect my page font-family: 'FontAwesome'; appear, i also tried font-family: FontAwesome as you said to make sure if there's no miracle lol, i also tried to use the font on something else than my h1 but it still didn't work

edit i tried your html code and i could see the icon appearing before the font, but it seems that the font still doesn't work

maybe check the net panel to make sure it is loading the CSS file properly, also worth making sure that you don't have any other CSS that are taking precedence — mrjamesmyers, Jan 21 '17 at 00:27

@font-face AwesomeFont doesn't work

2 Answers2