PrestaShop Documentation, PrestaShop Tutorials

Prestashop : comment ajouter des polices Google personnalisées

Voici les méthodes propres et recommandées pour ajouter des polices Google personnalisées dans PrestaShop (1.7 / 8 / 9).


Méthode 1 — Via le thème (recommandée)

1. Ajouter la police Google

Allez sur
https://fonts.google.com
Choisissez la police → Get embed code

Copiez la balise <link> fournie, par exemple :

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">

2. L’intégrer dans PrestaShop

Option A — header.tpl (méthode propre)

Chemin :

/themes/votre-theme/templates/_partials/head.tpl

Ajoutez le code avant </head> :

{block name='stylesheets'}
{$smarty.block.parent}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
{/block}

3. Appliquer la police (CSS)

Fichier :

/themes/votre-theme/assets/css/custom.css
body {
    font-family: 'Poppins', sans-serif;
}

h1, h2, h3 {
    font-family: 'Poppins', sans-serif;
}

Méthode 2 — Via le Back Office (rapide)

1. Aller dans :

Apparence → Thème & Logo → Paramètres avancés → CSS personnalisé

Ajoutez :

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

body {
    font-family: 'Poppins', sans-serif;
}

⚠️ Moins performant que la méthode <link>.


Méthode 3 — Auto-héberger la police (RGPD & performance)

1. Télécharger la police

Utilisez :

2. Placer les fichiers

/themes/votre-theme/assets/fonts/poppins/

3. CSS

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/poppins/poppins-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Poppins', sans-serif;
}

✔ Conforme RGPD
✔ Plus rapide
✔ Aucun appel externe


Recommandations SEO & Performance

  • Préférez <link> plutôt que @import
  • Ajoutez font-display: swap
  • Limitez le nombre de variantes (300,400,600)
  • Utilisez une seule famille si possible

Version conseillée

  • Site public / SEO → Méthode 1
  • Site européen / RGPD strict → Méthode 3

Si vous souhaitez, je peux :

  • Adapter la police uniquement au menu, produits ou CMS
  • Optimiser les polices pour PageSpeed
  • Vérifier la compatibilité avec votre thème PrestaShop exact

About zohaibk

We develop useful addons for #E-Commerce and #CRM software to provide extra features.#PrestaShop,#Magento,#SugarCRM,#Vtiger & #Android #apps
View all posts by zohaibk →