Recherche d'une police de caractères
La première chose à faire est bien évidemment de trouver une police de caractères qui vous plaise, on va donc utiliser Google Fonts.
Sélectionnez une police avec au moins 2 styles afin d'avoir le 'regular' (400) et le 'bold' (700).
Installation de la police de caractères
Une fois que vous avez trouvé la police qui vous plait, aller sur le site https://google-webfonts-helper.herokuapp.com/ qui va nous générer le code CSS et le fichier ZIP à télécharger.
Rechercher votre police puis sélectionnez la pour l'afficher.
À l'étape 2, sélectionnez 'regular' et '700'.
À l'étape 3, copiez le CSS et collez le au début du fichier /modules/jprestathemeconfigurator/views/css/fonts.css. Nous allons ensuite ajouter 2 lignes "font-display: swap;" pour améliorer le score Pagespeed comme dans cet exemple:
/* montserrat-regular - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/montserrat-v24-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/montserrat-v24-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/montserrat-v24-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/montserrat-v24-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/montserrat-v24-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/montserrat-v24-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-700 - latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/montserrat-v24-latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/montserrat-v24-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/montserrat-v24-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/montserrat-v24-latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/montserrat-v24-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/montserrat-v24-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}
À l'étape 4, téléchargez le fichier ZIP et décompressez le dans le répertoire /modules/jprestathemeconfigurator/views/fonts/.
Utilisation de la police de caractères
Maintenant allez dans le "Live Theme Configurator", dans l'onglet général "Typography" vous verrez votre nouvelle police de caractères dans la liste. Sélectionnez la, vous devriez voir la police de caractère changer mais ce sera de l'Arial. Il faut en effet faire une première sauvegarde pour que le configurateur de thème regénère le CSS et inclus la nouvelle fonts. Une fois sauvegardé vous verrez votre boutique Prestashop avec votre nouvelle fonts Google!
Laisser un commentaire