# Custom Fonts et Custom Icons d’Elementor Pro : vos polices et icônes

> Téléverser vos propres polices et vos jeux d'icônes Fontello ou IcoMoon dans Elementor Pro, sans dépendre de Google Fonts ni de Font Awesome complet.

- Auteur : Clément Hadrot
- Publié le : 2020-07-29
- Mis à jour le : 2020-07-29
- Catégorie : Elementor
- URL : https://wpmoderne.dev.wordpress-developpement.fr/elementor/custom-fonts-custom-icons-elementor-pro/

## L’essentiel

- Custom Fonts accepte woff, woff2, ttf, svg et eot en un seul import
- Custom Icons attend un zip exporté par Fontello ou IcoMoon
- L'auto-hébergement évite une requête externe vers Google Fonts

Un cabinet d'architectes nous a demandé, l'été dernier, de retirer toute dépendance externe de son site : plus une seule requête vers les serveurs de Google, pour des raisons de confidentialité autant que de performance. Le site tournait sous Elementor Pro, avec une police de caractères propriétaire fournie par leur agence de branding. La fonctionnalité Custom Fonts a réglé le problème en une vingtaine de minutes.

Elementor Pro propose deux bibliothèques distinctes pour ce genre de besoin : Custom Fonts pour les polices, Custom Icons pour les jeux d'icônes vectorielles. Les deux fonctionnent sur le même principe — un import dans **Templates**, puis une disponibilité immédiate dans tous les contrôles de style de l'éditeur — mais avec des formats de fichiers différents.

## Téléverser une police auto-hébergée

Rendez-vous dans **Templates > Custom Fonts > Add New**. Elementor Pro demande un nom de police, puis jusqu'à quatre fichiers pour une même graisse : `.woff2`, `.woff`, `.ttf` et `.svg`. Ce n'est pas un caprice : chaque format cible une génération de navigateurs différente, woff2 étant le plus compact mais pas toujours le seul supporté sur d'anciens parcs installés.

- `woff2` : format prioritaire, le plus léger, supporté par tous les navigateurs modernes.
- `woff` : filet de sécurité pour les navigateurs plus anciens.
- `ttf` : compatibilité étendue, fichier plus lourd.
- `svg` : hérité de l'ère iOS avant Safari 10, rarement indispensable aujourd'hui.

Une fois les fichiers importés et la police publiée, elle apparaît directement dans la liste déroulante **Family** de n'importe quel contrôle de typographie, mélangée avec les Google Fonts et les System Fonts, sous une section « Custom Fonts » clairement identifiée.

## Ce que génère Elementor en coulisses

Derrière l'interface, Elementor Pro enregistre une règle `@font-face` pour chaque graisse déclarée, avec les chemins vers les fichiers hébergés dans la médiathèque WordPress. Ce CSS est injecté dans le fichier global du site, ce qui signifie qu'une police custom ne charge qu'une seule fois pour tout le site, contrairement au CSS par page décrit ailleurs.

```
@font-face {
  font-family: "Cabinet Sans";
  src: url("/wp-content/uploads/elementor/custom-fonts/cabinet-sans.woff2") format("woff2"),
       url("/wp-content/uploads/elementor/custom-fonts/cabinet-sans.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
```

## Importer un jeu d'icônes personnalisé

Pour les icônes, direction **Templates > Custom Icons > Add New**. Contrairement aux polices, Elementor Pro n'accepte ici qu'une seule chose : une archive `.zip` exportée par un générateur de police d'icônes compatible, typiquement [Fontello](https://fontello.com/) ou IcoMoon. Le zip doit contenir la structure attendue par ces outils (fichiers de police, fichier de configuration JSON, feuille de démonstration).

### Étapes concrètes avec IcoMoon

1. Sur IcoMoon App, sélectionnez uniquement les icônes réellement utilisées sur le site — inutile d'exporter les 1 000 icônes du jeu complet.
2. Cliquez sur **Generate Font**, puis **Download** : le zip généré est directement compatible.
3. Dans WordPress, importez ce zip via Custom Icons, donnez-lui un nom.
4. Dans n'importe quel contrôle « Icône » d'un widget Elementor, le nouveau jeu apparaît en haut de la liste des bibliothèques disponibles.

> L'essentiel à retenir : Custom Fonts accepte woff, woff2, ttf, svg et eot en un seul import ; Custom Icons attend un zip exporté par Fontello ou IcoMoon ; L'auto-hébergement évite une requête externe vers Google Fonts

## Impact sur le chargement du site

C'est le principal argument en faveur de Custom Icons : au lieu de charger l'intégralité de Font Awesome (plusieurs centaines de Ko en police + CSS) pour n'utiliser que six ou sept pictogrammes, un jeu Custom Icons ne contient que les glyphes réellement sélectionnés. Sur un projet vitrine récent, ce choix a fait passer le poids des polices d'icônes de 180 Ko à moins de 12 Ko.

> Notre règle sur les projets avec identité graphique forte : dès qu'un client fournit plus de cinq pictogrammes sur mesure, on les passe systématiquement par IcoMoon plutôt que d'ajouter des images PNG une à une dans les widgets.

## Limites à connaître

- Custom Fonts ne gère pas les polices variables (variable fonts) de façon native ; chaque graisse reste un fichier séparé.
- Un zip Custom Icons mal structuré (pas issu de Fontello/IcoMoon) est simplement rejeté sans message d'erreur très explicite.
- Les polices et icônes custom ne sont pas incluses automatiquement dans un export de Kit si elles n'ont pas été republiées après l'import — un oubli fréquent en fin de projet.

## En résumé

Custom Fonts et Custom Icons permettent de sortir complètement de la dépendance à Google Fonts et Font Awesome, avec un gain de performance réel quand le jeu d'icônes est taillé sur mesure. Le format attendu diffère selon l'outil — fichiers de police bruts d'un côté, zip Fontello/IcoMoon de l'autre — mais l'intégration dans l'éditeur reste transparente une fois l'import terminé.