web-dev-qa-db-ja.com

Font Awesomeを読み込めません

私は自分のWebサイトサーバーでWebフォントをセルフサービスで読み込むことができませんでした。この件に関する他のStack Overflowの記事は、ここでエラーを見つけるのに役立ちませんでした。

フォントが表示されるはずの場所に空白ができます。

詳細は次のとおりです。

  • https://www.foo.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/は、フォントのCSSファイルの場所です。fontawesome-all.css

screenshot of CSS file path in an FTP browser

  • https://www.foo.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/webfontsはフォントの場所です

screenshot of font location in an FTP browser

まず、ヘッダーのスタイルシートリンクでパス関連のエラーをコミットしていないことを確認してください。

HTMLヘッダーでフォントのCSSスタイルシートを複数の方法で参照してみました。

相対リンクとして：

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

絶対リンクとして：

<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">

2番目に、@ font-faceの実装と指定されたパスが正しいことを確認してください。フォントのスタイルシートfontawesome-all.css内には、フォントの@font-face呼び出しがあります。

@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; }

編集：ページに表示されるフォント（アイコン）に使用しているHTMLは標準です。たとえば、<i class="fas fa-external-link-alt"></i>と疑似要素インスタンス：

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

編集2：フォントのCSSファイルに公式の外部ソースを使用すると、ヘッダーの<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">がフォントのインラインインスタンスで機能します。上記で示した例<i class="fas fa-external-link-alt"></i>ですが、疑似要素インスタンスではありません

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

いずれにせよ、自分のサーバーでファイルを提供したいので、オフサイトにリンクするだけでは不十分です。

最後に、参考までに： 公式のFont Awesomeインストールガイドはこちらからご覧ください

csswordpressfontsfont-awesomefont-face
3
user9353046

アイコンのレンダリングに必要なall.cssの他に、webfontsフォルダーも必要です。 enter image description here

これは、このタイプのエラーの解決策の1つです。

0
kumarras