Intégrer des polices personnalisées avec @font-face

Les polices personnalisées vous permettent de créer un site au design unique. Choisissez une police qui correspond à votre logo, figurant sur vos cartes de visite et documents de presse, ou des polices plus originales qui reflètent votre activité. La collection de polices intégrée de Duda, ainsi que les polices mises à disposition dans la bibliothèque Google Fontsvous permettent de choisir une police correspondant au design de votre site parmi un important choix. Si vous souhaitez en savoir plus sur l'utilisation des polices, nous vous invitons à suivre le guide ci-dessous dédié à l'intégration de polices personnalisées à vos sites.

Mentions légales : ce guide a été conçu sur la base d'un outil tiers, non développé par Duda. De même, la technologie @font-face repose sur du code personnalisé. Nous ne sommes pas en mesure de garantir que la police sélectionnée peut être intégrée à vos sites Web, que les fichiers de police obtenus sont prêts à être utilisés, ni que le code que vous modifiez est au bon format.

Bien que ces problèmes entraînent rarement des difficultés lors de la modification de votre site, veillez à sauvegarder votre site avant d'apporter des modifications au code. Rendez-vous sur cette page pour consulter notre politique en matière de codage personnalisé.

Préparer des fichiers de polices personnalisées

Il existe de nombreux formats de polices personnalisées, les plus courants étant les formats .otf, .ttf, .woff, .svg et .eot. Afin d'utiliser votre police, vous devez d'abord vous assurer de posséder les fichiers de police aux formats .ttf, .eot et .svg.  

Si vous ne disposez que d'un fichier au format .otf ou .ttf, nous vous conseillons d'utiliser un outil externe afin de convertir la police aux formats requis (pour ce guide, nous avons utilisé FontSquirrel, mais libre à vous d'utiliser l'outil de votre choix).

Convertir des fichiers .otf ou .ttf

1. Téléchargez ou achetez la police de votre choix au format .otf ou .ttf.
   Remarque

   Pour qu'une police fonctionne, elle doit être dotée d'une licence autorisant une exploitation sur le Web.

2. Rendez-vous sur le site de FontSquirrel, puis dans l'onglet Generator (Générateur). Ensuite, importez votre police et convertissez-la en sélectionnant l'option Expert. Sélectionnez les formats suivants (au minimum) : TrueType (.ttf), EOT Lite (.eot) et SVG (.svg), puis téléchargez le kit.

Importer des fichiers de police sur Duda

Si vous possédez déjà les liens vers les polices (par exemple, si ces dernières sont hébergées dans votre bibliothèque de polices et vous donnent accès aux liens, ou si vous avez importé des polices sur une plateforme de partage de fichiers), vous pouvez ignorer cette étape. Sinon, vous devrez intégrer les fichiers générés aux formats .ttf, .svg et .eot des versions de la police à votre site.

1. Dans le panneau de gauche, cliquez sur Contenu, puis Contenu du site et Gérer les fichiers.
2. Cliquez sur Télécharger un nouveau fichier et sélectionnez ces fichiers.
3. En survolant avec votre curseur l'un des éléments présents dans la section Fichiers téléchargés, il vous suffit de cliquer sur Sélectionner pour intégrer à votre site un bouton Télécharger le fichier.
4. Dans la barre de navigation, cliquez sur Informations et outils (), puis sur Lien de l'aperçu. Faites un clic droit sur le bouton et sélectionnez Copier l'adresse du lien : il s'agit du lien renvoyant au fichier sur votre site Duda.

   Ce processus peut être réalisé de manière séparée pour chaque fichier, de sorte à obtenir trois liens renvoyant à trois types de fichiers différents.

   Remarque

   Cette étape ne fonctionne pas lorsque vous êtes en mode prévisualisation sur l'éditeur. Vous devrez utiliser le lien d'aperçu disponible dans la section Informations et outils, accessible depuis la barre de navigation.

Intégrer des fichiers sur Duda via @font-face

1. Sur votre site, passez en mode développeur, puis ouvrez le fichier site.css et collez le code suivant :

@font-face {
font-family: 'FONT-NAME';
src: url('URL') format('embedded-opentype'),
url('URL') format('svg#FONT-NAME'),
url('URL') format('truetype');
font-weight: normal;
font-style: normal;
}

2. Accédez au dossier qui vous a été donné dans votre bibliothèque de polices ou celui téléchargé sur FontSquirrel. Ensuite, recherchez le fichier de style contenant un code similaire à celui indiqué plus haut. La ligne commençant par font-family: contiendra le nom de votre police.
   
3. Copiez le nom de la police et remplacez par le nom de votre police les deux occurrences de FONT-NAME dans l'extrait de code présenté ci-dessus.
4. Enregistrez les modifications et quittez le mode développeur.
5. Dans le panneau de gauche, cliquez sur Contenu, puis sur Contenu du site.
6. Cliquez sur Gérer les fichiers. Ensuite, cliquez sur le bouton Sélectionner qui apparaît sur le fichier de votre police : cette action vous permettra d'ajouter un bouton de téléchargement sur votre site.
7. Cliquez sur le bouton pour ouvrir l'éditeur de contenu, puis faites un clic droit sur l'URL de la police et sélectionnez Copier l'adresse du lien.
8. Accédez au mode développeur. Ouvrez le fichier site.css et remplacez l'URL par les chemins d'accès aux formats respectifs téléchargés (l'URL du bouton que vous avez copiée lors de l'étape 7). Ensuite, cliquez sur Enregistrer.

Voici ce à quoi votre code final pourrait ressembler :

Revenez à l'éditeur, faites un clic droit sur l'élément de texte que vous souhaitez modifier et cliquez sur Modifier HTML/CSS. Vous pouvez ensuite appliquer votre nouvelle police au widget sur l'ensemble des appareils ou à des vues d'appareils spécifiques à l'aide de l'extrait CSS au format : font-family: 'FONT-NAME' !important;. Dans ce cas précis, nous avons ajouté la ligne de code CSS : font-family: 'inklandregular' !important;.

De cette façon, il vous sera possible d'appliquer la police aux paragraphes, en-têtes et autres éléments. En passant en mode développeur, vous pourrez également appliquer des polices personnalisées aux éléments de texte en en-tête.

Appliquer une police personnalisée à des polices du thème

Pour appliquer vos polices personnalisées au thème du site, vous devez remplacer des éléments CSS précis par le nom de vos polices. Pour ce faire :

1. Cliquez sur le bouton Mode développeur dans la barre de navigation.
2. Cliquez sur Site HTML/CSS, puis sur site-theme.css.
3. Recherchez l'en-tête et la famille de police que vous souhaitez modifier (par exemple, H1, H2, etc.), puis remplacez la famille de police actuelle par le nom de votre police personnalisée.
4. Cliquez sur Save (Enregistrer).
5. Pour quitter le mode développeur, cliquez sur Fermer.

Appliquer la police via CSS

Pour définir la police que vous avez intégrée comme police du thème de votre site, ajoutez la ligne CSS suivante à site.css. Pour en savoir plus sur l'ajout de CSS personnalisé, consultez l'article Mode développeur.

Remplacez YOUR_GOOGLE_INTEGRATION_CODE ci-dessus par le code CSS de la famille de polices que vous avez copié dans Google Fonts. Cliquez sur Enregistrer.

Appliquer la police à un widget spécifique

Pour appliquer une police à un widget individuel :

1. Faites un clic droit sur le widget, puis cliquez sur Modifier HTML/CSS pour ouvrir la fenêtre d'édition HTML/CSS du widget.
2. Sous CSS général ou CSS spécifique à l'appareil, entre crochets {}, ajoutez le code CSS de la famille de polices que vous avez enregistré précédemment, à l'étape 2.
   

La police est désormais appliquée aux éléments de texte du widget. Vous pouvez utiliser l'éditeur inline pour changer les couleurs et modifier le texte normalement.

Appliquer une police personnalisée à des polices du thème

Pour appliquer vos polices personnalisées au thème du site, vous devez remplacer des éléments CSS précis par le nom de vos polices. Pour ce faire :

1. Cliquez sur le bouton Mode développeur dans la barre de navigation.
2. Cliquez sur Site HTML/CSS, puis sur site-theme.css.
3. Recherchez l'en-tête et la famille de police que vous souhaitez modifier (par exemple, H1, H2, etc.), puis remplacez la famille de police actuelle par le nom de votre police personnalisée.
4. Cliquez sur Save (Enregistrer).
5. Pour quitter le mode développeur, cliquez sur Fermer.

Remarques

• Duda ne prend pas en charge le format .woff2.
• Faites particulièrement attention à la façon dont les glyphes apparaissent sur la version Web de votre police. De nombreuses polices personnalisées offrent plusieurs versions de glyphes. Assurez-vous que votre police s'affiche correctement avant de l'appliquer à la version en ligne de votre site.
• Les polices personnalisées peuvent ralentir les performances de votre site ainsi que le délai de chargement, car la police doit être téléchargée avant d'être affichée. En règle générale, les sites Duda disposent d'une vitesse de chargement rapide. Toutefois, une baisse de la vitesse de chargement est inévitable lorsque de nouvelles polices sont ajoutées à un site. Pensez à vous demander si l'usage de polices personnalisées justifie une baisse de la vitesse de chargement.
• Si, pour différentes raisons, votre police personnalisée ne s'affiche pas, pensez à ajouter une police de secours dans votre CSS.
• Avec Duda, inutile de recourir à des requêtes @media pour afficher vos polices sur seulement quelques appareils. Il vous suffit d'ajouter un CSS personnalisé par appareil.
• N'utilisez que des polices dotées d'une licence autorisant une exploitation sur le Web et/ou un usage commercial. Le non-respect de la licence du propriétaire de la police est considéré comme une violation du droit d'auteur.