Unable to load Font Awesome
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' );
Admin
Updated on July 09, 2022Comments
-
Admin almost 2 years
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
-
-
Admin about 6 yearsI 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?
-
Admin about 6 yearsIt fixed half the problem. Inline instances work, such as
<i class="fas fa-camera-retro"></i>
, 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. -
Admin about 6 yearsThere are two more parts to the solution and they can be found here. 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.
-
cabrerahector about 6 yearsThanks for the update, @user136649. I was about to suggest you to check that as well after reading your previous comment.