Site icon PrestaShop | Magento | CRM Modules

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


Version conseillée

Si vous souhaitez, je peux :

Exit mobile version