Bonjour,

Je souhaite installer une police particulière dans un projet Symfony 5 qui utilise webpack encore.

Il ne s'agit pas d'ajouter fontawesome dont la procédure d'ajout est décrite dans la documentation et qui est incluse dans le projet et fonctionne.

Je n'ai pas trouvé beaucoup de référence sur le sujet ...

J'a i ajouté dans le app.css

@font-face {
  font-family: 'HollaScript';
  src: url('/assets/fonts/HollaScript.ttf') format("ttf");
}

Puis la commande yarn encore dev ... il n'y a pas d'erreur à la compilation.

Dans la vue twig je fais :

<header class="text-center" style="font-family:HollaScript;font-size: 3em;color:#008E8EFF;">

Il n'y a pas d'erreur dans la console du navigateur mais la police utilisée pour rendre l'élément n'est pas celle indiquée.

Si vous avez déjà pratiqué et solutionné, merci d'avance pour les informations.

A+

Up ?

A+

Bonjour @monkey3d,

si ça se trouve ça n'a aucun rapport, mais il faut écrire format("truetype") et non format("ttf") il me semble.

Ensuite l'idéal serait plutôt d'utiliser le format woff2 à la place de ttf.

Mais si ça se trouve c'est une fausse piste...

edit: un site pour générer ta font dans un autre format.

-
Edité par -RR- 3 juillet 2020 à 15:09:33

Tout d'abord merci de ta réponse RR.

J'ai essayé en changeant comme tu le suggères mais cela ne résout pas.

Je ne pense pas que ce soit un problème de format mais plutôt la manière de l'intégrer avec webpack.

Je continue à chercher car mon "client" veut cette police.

A+

Dans le doute, tu peux quand même essayer de l'intégrer dans un simple projet HTML + CSS ?

Au moins ça permettra d'être sûr que le problème vient bien de webpack.

edit: est-ce que dans l'onglet réseau de l'inspecteur d'éléments ta police est bien chargée ?

-
Edité par -RR- 3 juillet 2020 à 17:09:24

J'ai trouvé ! Du moins, la solution ci-dessous fonctionne. Bien-sûr les chemins sont à adapter en fonction de votre projet ...

1) il faut ajouter le copy-webpack-plugin comme module.

2) Le app.css devient :

@font-face {
  font-family: 'HollaScript';
  src: url('/build/home/HollaScript.ttf');
}

3) dans le webpackconfig.js, il faut ajouter :

var CopyWebpackPlugin = require('copy-webpack-plugin');

et

.addPlugin(new CopyWebpackPlugin([
        { from: './assets/fonts', to: 'fonts' }
    ]))

Merci à RR d'avoir pris un peu de son temps pour me répondre.

Je clos le sujet.

Bye

-
Edité par monkey3d 3 juillet 2020 à 18:07:02

solution simple sans CopyWebpackPlugin :

- mettre le ficher font dans /dossier/fonts/ta-police.ttf

- et dans /dossier/scss/ton-style.scss:

@font-face{
    font-family : 'Ta Police';
    src : url('/..fonts/ta-police.ttf') format('truetype');
}

webpack fait le reste

-
Edité par Seds 11 octobre 2021 à 21:48:24

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

• soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
• soit de créer un nouveau sujet décrivant votre propre contexte
• ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.