rempei
@rempei

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

@font-face のエラー

Q&A

Closed

###環境
Windows10、vscode

解決したいこと

public
>fonts
 >Kozuka-Gothic-Pro-R.otf

上記のようにフォントファイルを保存し、このファイルのインストールもしましたが
@font-face {
font-family: KozGo;
src: url(./fonts/Kozuka-Gothic-Pro-R.otf);
}
を実行すると下記のエラーが出ます。

発生している問題・エラー

Compiled with problems:X

ERROR in ./src/component/css/Vital.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/component/css/Vital.css) 5:36-95

Module not found: Error: Can't resolve './fonts/Kozuka-Gothic-Pro-R.otf' in 'C:\

または、問題・エラーが起きている画像をここにドラッグアンドドロップ

該当するソースコード

@font-face {
  font-family: KozGo;
  src: url(./fonts/Kozuka-Gothic-Pro-R.otf);
}

どうすれば解決できるでしょうか?

1

1Answer

ディレクトリの場所が間違っているとかですかね?

ディレクトリ構成と、どのディレクトリでコンパイル?を実行したか共有して頂けますでしょうか?

0Like

Comments

  1. CSSのurlは、相対パスだとCSSファイルの位置からの相対パスを読み込むようです。

    もし@font-faceを定義したのが./src/component/css/Vital.cssであれば、
    この設定は
    ./src/component/css/fonts/Kozuka-Gothic-Pro-R.otfを探していることになります。

    以下などに変えてみるとどうでしょうか?

    @font-face {
      font-family: KozGo;
      src: url(../../../public/fonts/Kozuka-Gothic-Pro-R.otf);
    }
    
  2. @rempei

    Questioner

    ご回答ありがとうございます。参考にさせていただきます。

  3. できれば、解決したかどうかコメント頂けると他の方の参考になると思います :bow:

Your answer might help someone💌