web-dev-qa-db-fra.com

Où puis-je placer des polices personnalisées dans Laravel 5?

Terminez le débutant à Laravel 5 et essayez d'importer des polices personnalisées en utilisant ce code dans mon en-tête:

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

et en l'appelant dans mes variables.scss. Actuellement, mes polices sont stockées dans mon répertoire public:

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

Pour une raison quelconque, cet avertissement apparaît dans mes outils de développement.

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

Et ma police ne se charge pas correctement.

phpcsslaravelfonts
15
user3818418

Placez tout ce que le navigateur du client devrait accéder à /public/. Vous pouvez utiliser la fonction d'assistance Laravel public_path pour créer des URL complètes.
https://laravel.com/docs/5.2/helpers#method-public-path

Par exemple, si vous mettez votre police dans /public/fonts/OptimusPrinceps.tff (ce que vous avez fait), vous pouvez y accéder de deux manières.

En lame:

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

En CSS comprend:

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

Dans le deuxième exemple, vous n’avez vraiment pas besoin de magie Laravel. Il suffit de référencer le chemin absolument pour qu'il pointe vers le bon répertoire. 

Il est à noter que cela fonctionne avec Bootstrap et SCSS. Je mets habituellement des polices dans /public/static/fonts/.

15
Jim

Dans webpack.mix.js ajouter

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

Document complet ici: https://laravel.com/docs/5.5/mix

4
Adam Pery

Dans Laravel 5.4 en CSS, je devais ajouter le /public avant le dossier /fonts pour que cela fonctionne. (pour les css inclus dans un fichier)

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

Une autre solution, qui est la meilleure, serait d’utiliser la fonction d’aide assets() comme ci-dessous. Le dossier des polices doit être dans le répertoire public pour ce cas. (pour css dans la balise head)

`<style>
@font-face {
    font-family: OptimusPrinceps;
    src: url('{{asset('/fonts/OptimusPrinceps.tff')}}');
}
</style>`
2
Allan Dereal

Pour ajouter le mot clé public lorsque vous incluez la police personnalisée dans laravel, veuillez ajouter ce qui suit:

le chemin de police de supose est css/fonts/proxima-nova-light-59f99460e7b28.otf dans le répertoire public puis utilisez-le comme

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

Vous pouvez donc utiliser le chemin de la police ../public/ + dans le répertoire public . Si vous rencontrez un problème, dites-moi votre chemin de police, je vous le mettrai à jour.

1
LetsCMS Pvt Ltd