Comment ajouter une police externe avec FontSquirrel ?

L'utilisation de polices de caractères spécifiques sur votre site est possible en plaçant des Web Fonts. Le site internet FontSquirrel permet l'utilisation de nombreuses polices de caractères, ce tutoriel vise à expliquer la mise en place d'une police générée depuis ce site.

Si vous souhaitez utiliser des polices avec le service Google Web Fonts, nous vous invitons à consulter le tutoriel dédié.

Ce tutoriel s'adresse à des utilisateurs avertis. L'accès au zones éditables du site nécessite l'offre Version PRO, Version Business ou Version E-commerce.

Générer les fichiers nécessaires à la mise en place de la webfont

Dans un premier temps vous devez télécharger une police en .otf disponible sur cette page par exemple (les listes de catégories de police se trouvent sur le menu vertical) :
https://www.fontsquirrel.com/fonts/list/tag/elegant

Pour la réalisation de ce tutoriel, nous prendrons l'exemple de la police Alegreya. Choisissez de préférence une police compatible avec la navigation mobile (icones présentes sous le nom de la police) puis cliquez sur le texte Download OTF :

Choix de police sur FontSquirrel — *Exemple de police compatible avec la navigation mobile sur FontSquirrel*

Une fois le fichier téléchargé, il faut le décompresser dans un dossier de votre ordinateur (avec un utilitaire comme WinRar par exemple).

Puis accédez à la page du générateur de webfont proposé par FontSquirrel : https://www.fontsquirrel.com/tools/webfont-generator

Choisissez un fichier otf parmis ceux téléchargés auparavant, idéalement choisissez celui avec le terme "Regular", ici : Alegreya-Regular.

Optez pour le mode expert puis dans la première section, cochez les cases des formats True Type, WOFF, EOT Lite et SVG. Ce sont les seules modifications nécessaires sur cette page.

*Utiliser le générateur de webfont sur FontSquirrel*

Une fois la police téléversée via le bouton "Upload Fonts", cochez la case : "Yes, the fonts I'm uploading are legally eligible for web embedding." puis cliquez sur le bouton "Download your kit".

Associer la webfont au site

Vous aurez un nouveau fichier à décompresser, idéalement dans un nouveau répertoire.

Téléchargez ensuite les fichiers suivants dans l'espace de stockage Fichiers de votre manager : EOT, SVG, True Type (TTF) et WOFF. Nous vous conseillons de créer un nouveau répertoire dans l'espace de stockage afin de placer ces quatres fichiers ensemble dans un répertoire spécifique : "Webfont" par exemple.

Dans les fichiers du kit téléchargé, ouvrez le fichier CSS (stylesheet.css) avec un éditeur de texte (Bloc-notes ou Notepad++ par exemple) puis copiez les lignes CSS à partir de @font-face.
Dans notre exemple, nous récupérons donc :

@font-face {
font-family: 'alegreyaregular';
src: url('alegreya-regular-webfont.eot');
src: url('alegreya-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('alegreya-regular-webfont.woff') format('woff'),
url('alegreya-regular-webfont.ttf') format('truetype'),
url('alegreya-regular-webfont.svg#alegreyaregular') format('svg');
font-weight: normal;
font-style: normal;
}

Une fois le code copié, collez-le dans la partie Configuration > Réglages > Zones éditables et dans le formulaire : Styles CSS supplémentaires.

Modifiez ensuite les URL des fichiers en ajoutant /medias/files/ devant les URL existantes et supprimez les suffixes après les extensions de fichier (?#iefix et #alegreyaregular dans notre exemple).

Vous devriez avoir alors un code comme celui-ci :

@font-face {
font-family: 'alegreyaregular';
src: url('/medias/files/alegreya-regular-webfont.eot');
src: url('/medias/files/alegreya-regular-webfont.eot') format('embedded-opentype'),
url('/medias/files/alegreya-regular-webfont.woff') format('woff'),
url('/medias/files/alegreya-regular-webfont.ttf') format('truetype'),
url('/medias/files/alegreya-regular-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

Utiliser la webfont sur le site

Vous pouvez désormais cibler les éléments qui devront avoir cette police. Par exemple pour que ce soit les titres des pages qui soit habillés de cette police, ajoutez sous cette règle CSS :

h1{
font-family:alegreyaregular, arial, cursive;
}

A noter :

une police n'est jamais déclarée seule. Il faut placer une police "classique" comme arial par exemple après la police souhaitée pour les éventuels navigateurs ou équipements ne pouvant afficher cette police.
si vous utilisez une police en plusieurs mots, placez des guillements pour la déclarer en font-family : "Arial Black" par exemple.

Voici le lien du tutoriel pour Faire ses premiers pas en CSS.