CSSでフォントファイル指定してるとこのパスを書き換えるのを忘れていて、全然映らず苦戦したのでメモ。

なぜか!それをやらなくてもユーザーアイコン(<i class="fas fa-user"></i>とか<i class="fa-regular fa-user"></i>とか)だけ映ってすごく混乱してしまった。。

なんでユーザーアイコンだけ映ったかはいまだに分かってない。

 

 

①フォントファイルをダウンロード

 

 

 

②使うファイルを設置

ダウンロード→解凍するとファイルはこんな感じですが

設置が必要なファイルはこれだけ

・CSS→all.min.css

・webfonts→全部

 

③HTMLにタグを埋め込む

「./fonts/」の部分は実際にall.min.cssファイルを設置した場所を読み込むように記載します。

 

私は今回こんなフォルダ構成にしていて、all.min.cssもフォントファイルも「fonts」フォルダに格納していました。

既に他のwebfontも使えるようにしていた関係で、webfontsフォルダをそのまま置きたくなかったんですね。(「fonts」と「webfonts」ができてしまうのは冗長なので)

 

④忘れていたこと

※CSSを格納したフォルダと同階層に「webfonts」をそのまま設置した場合には必要ありません。

all.min.cssを開いて「../webfonts」をフォントファイルを格納したフォルダ名に置換します。

私の場合は「fonts」フォルダに格納したので「../fonts/」に全置換です。これをすっかり失念していました。

 

 

 

一応参考サイトを見ながらやっていたのですが、そのサイトではフォントファイルの格納場所に言及していなかったので④の手順は無く、かつ表示テスト用に用意されていたユーザーアイコンのタグはなぜか表示されてしまっていたのでなかなか気づけませんでした。。ほんとになんで映ったの?(ローカルにファイルあるからとかかなぁ、、)