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

score 0 · Answer 2 · answered Nov 17 '19 at 14:37

0

Apart from the all.css which is required to render the icons, webfonts folder is also required.

This is one of the solution for this type of error.

answered Nov 17 '19 at 14:37

kumarras

96
5

Unable to load Font Awesome

2 Answers2