Unable to load Font Awesome

Question

I have been unable to self-serve and load a web font on my website server and other Stack Overflow articles on this subject have not helped me to locate the error here.

I get a blank space where the fonts should appear.

Here are the details:

https://www.foo.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/ is the location of my font's CSS file, fontawesome-all.css

https://www.foo.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/webfonts is the location of my font

Firstly, satisfy yourself that I have not committed path-related errors in my style sheet link in my header.

I have tried referencing the font's CSS stylesheet in my HTML headers in multiple ways:

As a relative link:

<link href="./fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css" rel="stylesheet">

As an absolute link:

<link href="https://www.foo.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css" rel="stylesheet">

Secondly, satisfy yourself that my @font-face implementation and the paths pointed to are correct. Inside the font's style sheet fontawesome-all.css is a @font-face invocation of the font:

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  src: url("../webfonts/fa-brands-400.eot");
  src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

.fab {
  font-family: 'Font Awesome 5 Brands'; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  src: url("../webfonts/fa-regular-400.eot");
  src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: url("../webfonts/fa-solid-900.eot");
  src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }

Edit: the HTML I am using for the fonts (icons) to appear on the page are standard: for example <i class="fas fa-external-link-alt"></i> and also the pseudo element instance:

.rss-subscribe:before{
font-family: 'Font Awesome 5 Free';
font-size: 20pt;
content: "\f09e";
margin-right: 10px;
float: left;
width: 32px;
}

Edit 2: Using an official external source for the font's CSS file, <link href="https://www.ashenglowgaming.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css" rel="stylesheet"> in the header works for inline instances of the font, as in the example I gave above <i class="fas fa-external-link-alt"></i>, but not for the pseudo element instance

.rss-subscribe:before{
font-family: 'Font Awesome 5 Free';
font-size: 20pt;
content: "\f09e";
margin-right: 10px;
float: left;
width: 32px;
}

In any case, I want to serve the file on my own server, so linking off-site is not sufficient for me.

Finally, for your reference: view the official Font Awesome installation guide here

What is the html you are using for the icons to appear on the page? — Arty, Feb 20 '18 at 12:35
When you inspect the link within the head of your site can you open the link to the stylesheet? or is it not loading at all into the site? — Arty, Feb 20 '18 at 12:57
No, this is _part_ of the problem - see cabrerahector's solution below. The original path for the CSS file was incorrect. `public_html` needs to be removed from the path, then the link can be opened correctly. Note also that I obviously substituted `www.foo.com` for my actual web domain, so you will not be able to access it unless you know my actual domain, which I can PM you with if needed. — , Feb 20 '18 at 13:44

cabrerahector · Accepted Answer · 2018-02-20T13:30:15.713

I think this might be the issue:

url("../webfonts/font-here.ext");

In your fontawesome-all.css stylesheet, you're asking the browser to look for the font files one directory above the current one which isn't accurate since the font files seem to be sitting in a folder in the same directory as the stylesheet is.

This should work:

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  src: url("webfonts/fa-brands-400.eot");
  src: url("webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("webfonts/fa-brands-400.woff2") format("woff2"), url("webfonts/fa-brands-400.woff") format("woff"), url("webfonts/fa-brands-400.ttf") format("truetype"), url("webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

.fab {
  font-family: 'Font Awesome 5 Brands'; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  src: url("webfonts/fa-regular-400.eot");
  src: url("webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("webfonts/fa-regular-400.woff2") format("woff2"), url("webfonts/fa-regular-400.woff") format("woff"), url("webfonts/fa-regular-400.ttf") format("truetype"), url("webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: url("webfonts/fa-solid-900.eot");
  src: url("webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("webfonts/fa-solid-900.woff2") format("woff2"), url("webfonts/fa-solid-900.woff") format("woff"), url("webfonts/fa-solid-900.ttf") format("truetype"), url("webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }

Update

This is the problem:

<link href="https://www.foo.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css" rel="stylesheet">

Should be:

<link href="https://www.foo.com/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css" rel="stylesheet">

So it seems you actually had two issues: wrong path to font files and wrong path to the stylesheet.

By the way, I recommend using wp_enqueue_style and wp_enqueue_script to append stylesheets and JS files to the head section of your theme:

/**
 * Proper way to enqueue scripts and styles
 */
function wpdocs_theme_name_scripts() {
    wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

I have edited the font's CSS style sheet and refreshed my server page caches, but still can't get the font to load. I believe your logic is correct now that I've checked the paths, but it may only be part of the solution? — , Feb 20 '18 at 13:13
It fixed half the problem. Inline instances work, such as ``, but not the pseudo element instance, using the unicode, e.g.: `.rss-subscribe:before{ font-family: 'Font Awesome 5 Free'; content: "\f09e";}` However, if you feel that is a separate problem, I can accept this solution and pose it as a separate question. — , Feb 20 '18 at 13:36
There are two more parts to the solution and they can be found [here](https://stackoverflow.com/questions/47712987/font-awesome-5-on-pseudo-elements). For some reason pseudo element inclusions of Font Awesome in version 5 are switched off by default and need to be switched on by script in the header. Secondly, not including specification for font-weight also causes the font to disappear. But you answered the question in the general sense and these are FA peculiarities so I have awarded you with the correct answer. — , Feb 20 '18 at 14:19
Thanks for the update, @user136649. I was about to suggest you to check that as well after reading your previous comment. — cabrerahector, Feb 20 '18 at 14:22

Unable to load Font Awesome

1 Answers1