@font-faceが読み込めません。

前提

初心者、自己学習中です。
初めてscssを分割管理しコーディングをしています。

発生している問題・エラーメッセージ

@font-faceがうまく読み込めていないのか、フォントが効きません。
「_fonts.scss」のコードを全てコメントアウトしてみると、指定したフォントが効いてくれます。
どうすれば＠font-faceが読み込めるのか教えてください。

構成

追記：sectionの中に「_header.scss」が入っています。

該当のソースコード

_fonts.scss
1@font-face {
2  font-family: "NotoSansJP-Medium";
3  src: url("../fonts/NotoSansJP-Medium.woff");
4}
5@font-face {
6  font-family: "NotoSansJP";
7  src: url("../fonts/NotoSansJP-Bold.woff");
8}
9@font-face {
10  font-family: "NotoSansJP-Black";
11  src: url("../fonts/NotoSansJP-Black.woff");
12}
13@font-face {
14  font-family: "Poppins";
15  src: url("../fonts/Poppins-ExtraBold.woff");
16}

style.scss
1@charset "UTF-8";
2@import "base";
3@import "fonts";
4@import "section/header";

_header.scss（sectionの中に入っています）
1& .wrapper{
2    width: 55.5rem;
3
4    & h1, p{
5      font-size: 4.5rem;
6      font-weight: 900;;
7
8      & span{
9        font-family: "NotoSansJP-Black";
10        display: block;
11      }
12    }
13  }

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Lhankor_Mhy

2022/07/06 01:26

NotoSansJP-Black.woff はどこにあったものですか？

riita

2022/07/06 10:54

Googleフォントからフォントをダウンロードしました。（拡張子は.ttfと.otfのファイルがありました）使い方を調べてみたら、woffに変換したほうがいいということが書いてあったので、woffに変換したものをfontsファイルに入れました。答えになっていますでしょうか？知識不足ですみません。

Lhankor_Mhy

2022/07/06 11:17

ありがとうございます。ファイルが壊れていないことをどのように確認されましたか？

riita

2022/07/06 12:05

調べて見ましたが、確認の仕方がよく分かりませんでした。どのように確認したらいいでしょうか？ visual studio code内で開こうとしたら "The file is not displayed in the editor because it is either binary or uses an unsupported text encoding. " と表示されます。

Lhankor_Mhy

2022/07/07 01:40

当方の環境では動作したので、フォントファイルが壊れているのでは、と思ったのです。 ↓これだとどうですか？ https://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.woff --- ただ、Googleフォントで使われているのは woff2 ですし、woff にこだわる理由がいまひとつわからないです。メジャーブラウザで otf が見えないのってありましたっけ……？ご存知かとは思いますが、対応を考えるのであればフォールバックした方が安心ではあります。

riita

2022/07/07 11:36

お世話になっております。添付していただいたファイルを使用したところ、うまくフォントが読み込まれました。ありがとうございます。色々と試したところ、オンラインの変換サイトを使用していたのが良くなかったのか、WOFFコンバータのソフトをダウンロードして、そちらで変換したファイルを使用したら、フォントが読み込まれました。参考にしているコーディングでwoffが使われていたので、woffがいいのかなぁという感じで使いました。勉強不足で、この拡張子がどんなもので、何が良いとか、悪いとかが全然分かっていない状態です。これからしっかり知識をつけたいと思います。