Prestashop insérer une police Webfont

Transcription

1 Prestashop insérer une police Webfont Intéressons nous aujourd hui à la gestion des polices dans le CMS Prestashop. Ce CMS spécialisé Ecommerce très efficace pour les utilisateurs finaux peut sembler un peu compliqué lorsqu il s agit de personnaliser son interface. Dans ce tuto, je vais vous apprendre à modifier la police principale utilisé dans le template du site. 1 ère étape trouver sa police de caractères Pour trouver une webfont, nous pouvons nous rendre sur le web, nous pouvons utiliser Google Font ou Fontsquirrel. Ces deux outils nous permettent de préparer le pack de polices dont nous avons besoin. Fontsquirrel à l avantage de vous permettre de créer un pack de police pour le web à partir d une police de caractères située sur votre disque dur. (bien entendu, l utilisation de cette police dépend de sa licence et de ses droits d utilisation) Pour cet exemple, nous commencerons par utiliser Fontsquirrel Rendez-vous sur Pour choisir une police Fontsquirrel propose un menu sur la droite pour vous guider dans le choix de votre police.

2 Je choisi une police script Alex Brush et je clique sur le lien Download TTF

3 Le dossier est téléchargé dans mon dossier de téléchargements sur mon disque-dur 2ème étape Dézipper le dossier téléchargé 3ème étape Générer les webfonts Rendez-vous sur l onglet Generator de Fontsquirrel Cliquer sur Upload Fonts

4 Choisir dans le dossier dézippé la font avec l extension.ttf Le site charge la police et nous demande de choisir l option de traitement du fichier. Le choix Optimal fonctionne très bien N oubliez pas que l utilisation des polices est soumise à des droits. Cocher la case Agreement. Vous avez coché? Enregistrez!

5 4ème étape que trouves t on dans ce dossier? Fontsquirrel nous a préparé des polices et un exemple de code css pour l insertion dans notre feuille de styles de thème. Le dossier téléchargé est un zip ; ouvrons le! Les fichiers avec les extensions : EOT, SVG, TTF, WOFF, WOFF2 permettent de lire la police sur les différents navigateurs. Nous allons les placer dans notre thème prestashop. Nous ouvrirons ensuite stylesheet.css qui est l exemple du code à utiliser dans notre feuille de style. Le fichier txt peut servir pour un import en base de données. Le fichier html est le mode d emploie du kit de police. 5ème étape préparation de l Insertion dans Prestashop Il nous faut regrouper les polices dans le dossier fonts de notre thème Je vais les déposer à l aide du logiciel de transfert FTP filezilla Par Filezilla, je me rends sur mon site distant, je navigue dans mes répertoires jusqu au thème

6 Et je parcours les dossiers de mon thème pour y trouver le dossier fonts. Si celui-ci n existe pas, je peux le créer. Je vais déposer à l intérieur de ce dossier les Fonts avec les extensions : EOT, SVG, TTF, WOFF, WOFF2 que j ai téléchargé depuis Fontsquirrel Je transfert vers le dossier Fonts de mon thème les 5 polices de mon kit alexbrush.

7 6ème étape Travail de la CSS C est maintenant dans la feuille de styles que tout va se jouer. Regardons en premier le contenu de l exemple téléchargé dans le kit Ce sont ces lignes de code que nous allons reporter dans la feuille de style de notre thème. Qu est ce qu elles racontent? La est une déclaration de polices. Le sélecteur font-family nomme la police, c est ce nom que l on utilisera dans nos régles de propriétés dans la feuille de style ; Ensuite le sélecteur src donne l accès à l url du dossier où sont rangées les fonts Font-weight et font-style sont des propriétés qui déclarent la forme de la police (ici normal) Sur l installation de Prestashop, la feuille de style du thème par défaut (bootstrap) est la global.css Elle se trouve dans le dossier CSS du thème Je vais l éditer avec FileZilla et mon éditeur de code (notepad++ ou brackets) En effectuant une recherche dans la feuille de style global.css, je trouve qu il existe déjà une à la ligne Je vais donc ajouter vers la ligne 3906 ma seconde régle CSS pour cette feuille de style.

8 Toutefois Attention ce n est pas fini. 7ème étape Donner les bons chemins d accès Il me reste à modifier mes chemins d accès vers les polices. Rappelez vous à l étape 5 j ai uploader les polices webfont vers le dossier fonts de mon thème. Je dois donc dire dans la que mes polices sont stockées dans ce dossier. Cette déclaration de chemin se fait sur les ligne src 3911 à 3916 de mon éxemple Ce qui donne si mes polices sont dans le dossier fonts de mon thème : src: url('../fonts/alexbrush-regular-webfont.eot'); src: url('../fonts/alexbrush-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/alexbrush-regular-webfont.woff2') format('woff2'), url('../fonts/alexbrush-regular-webfont.woff') format('woff'), url('../fonts/alexbrush-regular-webfont.ttf') format('truetype'), url('../fonts/alexbrush-regular-webfont.svg#alex_brushregular') format('svg');

9 8 èm e et dernière étape Préciser où utiliser cette police Notre travail est presque terminé. Maintenant il nous reste à placer une règle utilisant la propriété suivante : font-family: 'alex_brushregular', Arial, sans-serif; par exemple pour les paragraphe : p { font-family: 'alex_brushregular', Arial, sans-serif; } dans notre feuille de style, je vais modifier les selecteurs h1 à h6 ; ils sont normalement définis vers les lignes 355 de votre feuille de styles global.css il me suffit de repérer la propriété font-family et venir copier le nom de ma webfont à la place de Arial, ce qui donne N oublions pas de sauvegarder la feuille de style et d effectuer le transfert avec Filezilla vers notre hébergement

10 Le résultat, notre police est modifiée oui mais. Si je veux changer mes titres de bloc par exemple? Facile, à l aide de l inspection d éléments sur mon navigateur

11 En étudiant le code je comprends que mes titres de blocs ont une classe css title-block Celle ci est définie à la ligne 6528 de ma feuille global.css Remplacez open Sans par alex_brushregular et le tour est joué! A vous la personnalisation facile de vos thèmes!!! Besoin d un guide pour vous accompagner dans l aventure de la création de votre site web? Je vous forme à l utilisation des CMS (sites à gestion de contenu) Simplement vous apprenez à maîtriser divers outils qui vous permettent de réaliser votre propre site à votre image. Contactez moi! et retrouvez d autres tutos sur mon site jeform.fr