Changer une police avec un CSS [Résolu]

[Marcusp]

Bonjour,

j'ai acheté un module pour Prestashop il y a quelques semaines (One for All), et malheureusement le support n'est pas d'une grande aide (ne vous fiez pas au nombre d'étoiles, les gens mettent 5 étoiles uniquement pour obtenir des mois de support supplémentaires pour info).

Bref, je m'éloigne du sujet, car mon soucis c'est que je dois réaliser un "megamenu" avec plusieurs sections. Or je souhaite harmoniser les polices entre 2 sections, intégrant chacun un widget différent.

Une section a la police "Avenir Next" et les autres "Optima nova", n'étant pas développeur web, j'ai cherché dans les sources de la page et sur www.w3schools.com.

Voilà ce que j'ai mis dans un fichier nommé custom.css destiné à contenir les customisations utilisateur:

@font-face {
  font-family: 'Optima nova';
  src: url("../fonts/optimanova.eot");
  src: url("../fonts/optimanova.eot?#iefix") format("embedded-opentype"), url("../fonts/optimanova.woff2") format("woff2"), url("../fonts/optimanova.ttf") format("truetype"), url("../fonts/optimanova.svg#optimanova") format("svg");
  font-style: normal;
  font-display: swap; }

.police-gras {
  font-family: "Optima nova", sans-serif;

}

Si je stipule dans .police-gras que la police doit être en gras justement ça s'applique bien, mais la police Optima Nova ne s'applique pas. Quelqu'un pourrait-il m'indiquer où j'ai fait une erreur dans le code svp ?

Edited November 9 by Marcusp (see edit history)

[Marcusp]

Personne pour me filer un pti coup de main 😅?

[AfterGlow93]

On 10/24/2024 at 10:10 AM, Marcusp said:

Personne pour me filer un pti coup de main 😅?

Bonjour, 

La syntaxe n'est pas bonne.

Quote

 

.police-gras {

  font-family: "Optima nova", sans-serif;

}

À remplacer par : 

Quote

 

.police-gras {

font-family: 'Optima nova', sans-serif;

}

 

Pas de guillemets double nécessaires dans font-family.

[Mediacom87]

Le 16/10/2024 à 11:43 AM, Marcusp a dit :

j'ai acheté un module pour Prestashop il y a quelques semaines (One for All)

Ne serait ce pas plutôt un thème qu'un module ?

[Marcusp]

Bonjour,

@AfterGlow93 merci pour ta réponse, en effet j'ai zappé cette faute de syntaxe, pour autant malheureusement la police par défaut s'applique toujours. Est-ce qu'il y aurait une commande, que j'ai oubliée, qui pourrait permettre de forcer cette police et le  style qui va avec ?

@Mediacom87 Oui en effet, il fait un peu tout sauf le café 😅

[AfterGlow93]

17 minutes ago, Marcusp said:

Bonjour,

@AfterGlow93 merci pour ta réponse, en effet j'ai zappé cette faute de syntaxe, pour autant malheureusement la police par défaut s'applique toujours. Est-ce qu'il y aurait une commande, que j'ai oubliée, qui pourrait permettre de forcer cette police et le  style qui va avec ?

@Mediacom87 Oui en effet, il fait un peu tout sauf le café 😅

S'agit il d'un site en ligne ?

Peut-être qu'avec une balise important c'est faisable pour forcer ce sélecteur avec cette police si c'est le cas avant.

Difficile à dire sans le code complet ou un accès au site pour comprendre l'origine du problème.

Essaie avec ça pour voir ? 

Quote

 

.police-gras {

font-family: ' Optima nova '!important;

}

 

Inutile de le faire dans le CSS directement, en testant en mode inspection dans chrome sur la classe .police-gras en copiant le paramètre font-family dedans, voir si ça change en live.

[Marcusp]

Alors il est en ligne, mais en mode maintenance le temps que tout soit fini niveau statuts de l'entreprise. Je vais te donner les infos en MP.

J'ai essayé ta modif, ça n'a malheureusement rien changé.

[Divine]

Bonjour,

Essayez en ajoutant la graisse de la police :

@font-face {
  font-family: 'Optima nova';
  src: url("../fonts/optimanova.eot");
  src: url("../fonts/optimanova.eot?#iefix") format("embedded-opentype"), url("../fonts/optimanova.woff2") format("woff2"), url("../fonts/optimanova.ttf") format("truetype"), url("../fonts/optimanova.svg#optimanova") format("svg");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.police-gras {
  font-family: 'Optima nova', sans-serif;
  font-weight: 700;
}

Vous pouvez aussi essayer en utilisant les valeurs "normal" et "bold" à la place de "400" et "700".

[Marcusp]

@Divine J'ai poussé la modif en essayant les 2 solutions, mais aucune différence n'apparaît, il y a une autre CSS qui doit prendre le pas sur celle que je veux utiliser...

[Divine]

Du coup oui sûrement, mais sans accès au site, nous allons avoir du mal à vous aider...

[Divine]

Problème résolu : la police était bien appliquée mais la taille de la police n'était pas bonne, ce qui donnait l'impression qu'elle n'était pas appliquée.

Pensez à éditer votre premier post et à ajouter [Résolu] dans le titre

[Marcusp]

Voilà la solution complète ci-dessous, merci à Divine et Afterglow93 pour leur aide:

.police-optima-megamenu .dropdown-widget ul li a {
    font-family: 'Twemoji Country Flags', "Optima nova", sans-serif !important;
    font-size: 14px;
    text-transform: none;
    text-decoration: none;
    font-weight: normal;
    color: #000;
}

 

[kis2a]

le module dois etre mal coder , ou n'a pas tout les fichier requis :

 

[code]@font-face { font-family: 'Optima nova'; src: url("../fonts/optimanova.eot"); src: url("../fonts/optimanova.eot?#iefix") format("embedded-opentype"), url("../fonts/optimanova.woff2") format("woff2"), url("../fonts/optimanova.ttf") format("truetype"), url("../fonts/optimanova.svg#optimanova") format("svg"); font-style: normal; font-display: swap; } .police-gras { font-family: "Optima nova", sans-serif; }[/code]

 

src: url("../fonts/optimanova.eot" , il cherche une url , deja mieux vos , heberger direct sur sont serveur , que du distant !!!!!!!!  j'espere que se module est gratuit !!!!!!