Laravel 5にカスタムフォントを配置する場所はどこですか？

Question

完全Laravel 5に初心者と私のヘッダにこのコードを使用したカスタムフォントをインポートしようとしている：

<style> 
@font-face { 
    font-family: 'Conv_OptimusPrinceps'; 
    src: url('fonts/OptimusPrinceps.eot'); 
    src: local('☺'), url('fonts/OptimusPrinceps.woff') format('woff'), url('fonts/OptimusPrinceps.ttf') format('truetype'), url('fonts/OptimusPrinceps.svg') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

、私のvariables.scssでそれを呼び出します。現在、私のフォントは、私のパブリックディレクトリに格納されています。

public/fonts/OptimusPrinceps.woff 
public/fonts/OptimusPrinceps.tff 
etc. 

この警告は私のdevのツール

Failed to decode downloaded font: http://localhost:3000/fonts/OptimusPrinceps.tff 
OTS parsing error: invalid version tag 

に表示されます。そして、私のフォントが正しくロードされず、いくつかの理由。

Answer 1

クライアントブラウザがアクセスするものを/public/に配置します。 Laravelヘルパー関数public_pathを使用して、完全なURLを構築することができます。
https://laravel.com/docs/5.2/helpers#method-public-path

はたとえば、あなたは（あなたがやった）/public/fonts/OptimusPrinceps.tffでフォントを入れた場合、あなたはそれの2つの方法のいずれかにアクセスすることができます。ブレードで

：CSSで

<style type="text/css"> 
@font-face { 
    font-family: OptimusPrinceps; 
    src: url('{{ public_path('fonts/OptimusPrinceps.tff') }}'); 
} 
</style> 

が含まれています：

2番目の例では

@font-face { 
    font-family: OptimusPrinceps; 
    src: url('/fonts/OptimusPrinceps.tff'); 
} 

、あなたは本当に、任意のLaravelの魔法を必要としません。パスを絶対に参照して、正しいディレクトリを指すようにしてください。

これはブートストラップとSCSSで動作することに注意してください。私は通常、フォントを/public/static/fonts/に入れます。

Answer 2

CSSのLaravel 5.4では、/fontsフォルダーの前に、/publicを追加する必要がありました。

Answer 3

あなたはlaravelでカスタムフォントを含むとき、パブリックキーワードを追加するには、以下を追加してください：

suposeのフォントパスは公開ディレクトリにCSS /フォント/ PROXIMA-新星光-59f99460e7b28.otfですそして、あなたは公共のディレクトリに../public/ +フォントパスを使用することができます

@font-face { 
    font-family: 'proxima-nova'; 
    font-style: normal; 
    font-weight: 900; 
    src: url('../public/css/fonts/proxima-nova-light-59f99460e7b28.otf'); 
} 

として使用します。 問題がある場合は、フォントパスを教えてください。そのパスを更新します。

Answer 4

webpack.mix.jsではここ

mix.copyDirectory('resources/assets/fonts', 'public/fonts'); 

全ドキュメントを追加：https://laravel.com/docs/5.5/mix