Importer une police personnalisée

[Créa'Web]

Bonjour, 

J'écris ce topic car après plusieurs recherches infructueuses de ma part sur le sujet, je recherche à importer une police personnalisée sur mon site Prestashop en version 1.7.7.

 

[Remy FRK Corp]

Bonjour.

tout d'abord  CSS: la règle @font-face est votre amie :

https://www.alsacreations.com/astuce/lire/630-fonte-personnalisee-site-web.html

après lecture attentive du tuto d'Alsa...retour sur PS vous avez un dossier : "_libraries" (situé dans le répertoire themes)

peso je le trouve pas mal pour y placer un dossier de fonte custom (peut être que d'autres partirons sur le dossier assets qui est tout indiqué ...et qui après tout contient des fichiers.eot donc à priori  de la police)

ensuite direction le fichier custom.css et appelez votre nouvelle police avec un :

@font-face {
    font-family: "Ma Super Fonte";
    src: url('/themes/_libraries/nom du dossier ou se trouve la police/nom du fichier de la police');
}

Puis déclarez la  dans votre body ( par exemple, ou sur un élément plus ponctuel si vous ne souhaitez agir que localement... )

body {
    font-family: "Ma Super Fonte";

}

! n’oubliez pas vos anciennes police pour autant et faites plutôt :

body {

font-family: "Ma Super Fonte",Montserrat,Helvetica,Verdana,sans-serif;

}

videz votre cache et enjoy

c'est tout.

Ah si soyez quand mème prudent certaines fontes peuvent peser lourd (normal pour de la fonte ?...ok je sort) sur votre site, mais c'est une autre histoire...

 

Edited January 27, 2021 by Remy FRK Corp (see edit history)

[Créa'Web]

Merci pour ta réponse claire et précise.

 

J'utilise le module Créative Elements et je voudrais juste pouvoir la retrouver dans les polices systèmes.

 

D'ailleurs prestashop pourrait prévoir dans ses prochaines mises à jour la possibilité d'intégrer sa police personnalisée

[Créa'Web]

On 1/27/2021 at 3:37 AM, Remy FRK Corp said:

Bonjour.

tout d'abord  CSS: la règle @font-face est votre amie :

https://www.alsacreations.com/astuce/lire/630-fonte-personnalisee-site-web.html

après lecture attentive du tuto d'Alsa...retour sur PS vous avez un dossier : "_libraries" (situé dans le répertoire themes)

peso je le trouve pas mal pour y placer un dossier de fonte custom (peut être que d'autres partirons sur le dossier assets qui est tout indiqué ...et qui après tout contient des fichiers.eot donc à priori  de la police)

ensuite direction le fichier custom.css et appelez votre nouvelle police avec un :

@font-face {
    font-family: "Ma Super Fonte";
    src: url('/themes/_libraries/nom du dossier ou se trouve la police/nom du fichier de la police');
}

Puis déclarez la  dans votre body ( par exemple, ou sur un élément plus ponctuel si vous ne souhaitez agir que localement... )

body {
    font-family: "Ma Super Fonte";

}

! n’oubliez pas vos anciennes police pour autant et faites plutôt :

body {

font-family: "Ma Super Fonte",Montserrat,Helvetica,Verdana,sans-serif;

}

videz votre cache et enjoy

c'est tout.

Ah si soyez quand mème prudent certaines fontes peuvent peser lourd (normal pour de la fonte ?...ok je sort) sur votre site, mais c'est une autre histoire...

 

Bonjour, 

Je reviens sur ta réponse. Comment est-ce que je peux faire pour factoriser tout ça sur les pages "natives" de Prestashop du genre (Contact - connnexion etc…) ? 

 

Merci d'avance

[Remy FRK Corp]

Bonjour.

Normalement tu peux factoriser en préfixant des sélecteurs CSS, ca peut ètre sur une div, une page, etc...

je suppose qu'à à priori si tu demande c'est que tu ne dois pas pouvoir appliquer ta police direct à ton body "général" de toutes les pages,

Pour appliquer localement par exemple à toute ta page "contact"

.page-contact body {
    font-family: "Ma Super Fonte",Montserrat,Helvetica,Verdana,sans-serif;

}

tu peux les enquiller ainsi :

.page-contact body,.page-(non de la page) body

{
    font-family: "Ma Super Fonte",Montserrat,Helvetica,Verdana,sans-serif;

}

Encore plus précisément tu peut cibler une div ou n'importe quel éléments html avec le mème principe

jette un yeux par ici pour voir un peu toutes les syntaxes que tu peux utiliser (y'en as un paquet)

https://developer.mozilla.org/fr/docs/Web/CSS/Sélecteurs_CSS

 

[Créa'Web]

Merci, mais oui ça je le sais mais, n'est-il pas possible de le faire plus facilement dans le back-office? cela fait énormément de pages, cela aurait été bien de le modifier en l'inscrivant comme cela :

 

body, aside, section, div (ou même directement h1,h2,h3,h4,h5,h6,p,span,div){

   font-family:'Montserrat' !important;

}

 

Merci d'avance! 

P.S : soyez exigents, je débute sur Prestashop qui est plus complexe que WordPress je trouve…