Comment utiliser les polices téléchargées dans WordPress sans plugin

Google Fonts est une ressource incroyable. Avant que cela ne soit si répandu, créer des sites Web qui utilisaient des polices uniques était une véritable tâche. Maintenant, cependant, avec quelques clics et un extrait de code, votre site Web passe de Helvetic-eh à Helvetic-awesome . Mais que se passe-t-il si la police que vous aimez ne fait pas partie de la famille Google Fonts ? Vous devez savoir comment utiliser les polices téléchargées car vous avez découvert une fantastique police hipster qui parle à l'âme de votre barbe.

L'utilisation d'une police téléchargée sur votre site Web n'est pas aussi simple que clicky-clicky-paste-paste. Ce n'est pas un processus difficile, remarquez, et je vais vous guider à travers cela afin que vous n'ayez plus jamais, jamais, un site Web Helvetic-eh .

Maintenant, je tiens à souligner que vous pouvez le faire via un plugin. Il y en a une poignée disponible dans le repo. Mais pourquoi voudrions-nous faire cela ? Je suis le genre de gars qui préfère éviter d'utiliser un plugin quand quelques lignes de code feront la même chose. Les plugins en excès provoquent des tonnes de ballonnements, des requêtes HTTP inutiles et ralentissent votre site.

Nous allons donc importer ces polices à la main, comme si c'était à nouveau à la fin des années 90. Awww, ouais.

Choisir et télécharger une police

Je suis un grand fan des rafles de polices. Elegant Themes a une tonne que vous pouvez parcourir pour voir ce que vous aimez. Alors frappez-en quelques-uns et voyez ce que vous aimez.

• Polices d'écriture manuscrite
• Polices rétro
• Polices haut de gamme
• Polices cursives
• Polices Hipster
• Polices amusantes

Pour moi, je vais avec la police Aventura de la rafle Hipster.

Votre première étape consiste à trouver le lien de téléchargement de la police et à enregistrer le fichier sur votre ordinateur. Il s'agira probablement d'un fichier .zip contenant divers formats de fichiers. Les plus courants que vous trouverez sont .ttf (TrueType Font) ou .otf (OpenType Font).

Créer une police Web (un peu facultatif, mais pas vraiment)

FontSquirrel a un excellent outil que vous pouvez utiliser pour vous assurer que personne et aucun navigateur ne reste incompatible avec la splendeur de votre site. Étant donné que la plupart des polices que vous téléchargez ne seront disponibles que dans un seul format, l'outil FontSquirrel fait en sorte que vous ne soyez pas limité par ce que l'auteur de la police a distribué. Tant que vous disposez des droits d'utilisation de la police, vous pouvez vous assurer qu'elle fonctionne avec votre produit/site.

Téléchargez simplement votre police récemment téléchargée et choisissez vos options. Personnellement, j'utilise les options Expert , juste pour obtenir tous les formats de polices possibles. Les autres fonctionnent, mais vous n'obtenez pas autant de types de fichiers, ce qui est un peu le but de l'ensemble.

FontSquirrel est également génial car il vous fournit le CSS requis pour les importer sur votre site. Comment est-ce pour convivial? Vous allez simplement le copier et le coller (ce dont nous traitons ci-dessous).

Télécharger votre police sur WordPress

Cela fait, vous devrez télécharger la police sur votre fournisseur d'hébergement. Je le fais toujours via FTP (j'utilise FileZilla, mais vous pouvez utiliser le client de votre choix).

Si vous ne connaissez pas les informations FTP de votre hôte, accédez à votre cPanel et regardez sous Fichiers -> Comptes FTP .

Vous y verrez tous les comptes FTP de l'hôte, et vous devriez également voir un lien Configurer le client FTP à côté de chacun.

Lorsque vous y allez, cPanel vous donne des informations sur le serveur ou un fichier FileZilla (et autres) que vous pouvez importer pour obtenir vos informations d'identification. Je préfère le manuel, personnellement, mais vous faites ce que vous aimez. Même si vous utilisez le fichier, vous aurez besoin du mot de passe pour vous connecter, les deux méthodes sont donc sûres et sécurisées.

Maintenant que vous êtes connecté à votre hébergeur via FTP, accédez au dossier /wp-content de votre site. Parce qu'il s'agit de contenu pour votre site WordPress, pourquoi ne le mettriez-vous pas là ? N'hésitez pas à le mettre n'importe où, même dans /wp-content/uploads . Vous faites vous.

FTP est super facile pour télécharger votre fichier. Recherchez simplement le fichier de police que vous avez téléchargé et faites-le glisser dans le volet inférieur droit de FileZilla. Cela lancera le téléchargement. Il ne vous faudra pas plus d'une seconde environ pour le voir dans l'annuaire.

Si vous avez utilisé l'outil FontSquirrel dont nous avons parlé ci-dessus, vous le ferez également pour tous les fichiers de polices que vous avez téléchargés à partir d'eux. Faites-les simplement glisser et déposez-les là où vous voulez les stocker.

Utiliser votre police avec CSS

Votre police est maintenant téléchargée et blottie en toute sécurité dans sa couverture wp-content chaude et confortable. Il est temps d'ajouter l'importation CSS nécessaire à votre thème.

Dirigez-vous vers le répertoire de votre thème enfant (vous utilisez un thème enfant, n'est-ce pas ?) dans votre client FTP et recherchez le fichier style.css , cliquez dessus avec le bouton droit et sélectionnez Afficher/Modifier pour l'afficher dans votre éditeur de texte par défaut.

Si vous n'avez pas de thème enfant, utilisez le créateur de thème enfant Orbisius pour le faire ultra-rapidement. Vous pouvez supprimer le plugin par la suite. J'adore cette chose.

@font-face

Le code que nous utilisons provient directement de FontSquirrel (vous pouvez écrire le vôtre ou copier/coller l'exemple ci-dessous), et tout ce que j'ai changé était le chemin de téléchargement de l'URL pour inclure /wp-content . Tout le reste est fourni par le générateur de polices Web.

Tout ce que fait ce script @font-face, c'est dire aux feuilles de style de votre site Web : "Hé, mec, je mets cette nouvelle police ici si vous voulez l'utiliser un jour." Tu sais, un peu comme tu le fais quand tu ramènes des cupcakes à la maison et que tu le dis aux gens avec qui tu vis.

Sans @font-face , si vous essayez d'appeler font-family : 'aventurabold'; par CSS, votre site ne pourra pas le trouver car on ne lui a jamais dit où vous le gardez.

@font-face {
    font-family: 'aventurabold';
    src: url('/wp-content/aventura-bold-webfont.eot');
    src: url('/wp-content/aventura-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/aventura-bold-webfont.woff2') format('woff2'),
         url('/wp-content/aventura-bold-webfont.woff') format('woff'),
         url('/wp-content/aventura-bold-webfont.ttf') format('truetype'),
         url('/wp-content/aventura-bold-webfont.svg#aventurabold') format('svg');
    font-weight: normal;
    font-style: normal;

}

Enregistrez le fichier, et puisque vous l'avez ouvert pour le modifier via FileZilla, vous obtiendrez une boîte de dialogue vous demandant si vous souhaitez remplacer celui sur le serveur. Votre réponse est évidemment oui.

Maintenant, tout ce que vous avez à faire est d'aller dans votre custom.css (ou si vous utilisez Divi, Divi -> Options du thème -> CSS personnalisé dans le volet de navigation de votre tableau de bord WP.)

Vous ajoutez simplement le style CSS comme vous le feriez pour n'importe quelle autre police. J'ai simplement remplacé les polices Google 'Roboto' et 'Exo' que j'utilisais par 'aventurabold' , et les choses allaient bien (grâce à l'importation @font-face ci - dessus).

body {
    font-family: "aventurabold", arial, sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: #ffffff;
    text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6 {
    color:  #fff;
    font-family: 'aventurabold', sans-serif;
    font-weight: 700;
   text-transform: uppercase;
}

Les fruits de nos travaux

Voici à quoi cela ressemblait avant :

Et voici ce qui s'est passé après avoir ajouté Aventura au CSS :

Hourra ! Ça marche! Bon travail! Allez nous !

J'ai l'air bien, Friendo

Comme le capitaine Malcolm Reynolds l'a dit un jour : « Nous avons fait l'impossible, et cela nous rend puissants ». Eh bien, d'accord, alors télécharger une police et l'importer via CSS n'est peut-être pas tout à fait l' impossible , mais vous avez certainement fait quelque chose que de nombreux utilisateurs de WordPress n'oseraient pas faire : ajouter des fonctionnalités de base sans plugin.

Et cela, mes amis, vous rend vraiment puissant.

Alors, quelle est votre police préférée à utiliser sur le Web qui n'est pas une police Google ? Dites-le moi dans les commentaires !

Image miniature de l'article par 32 Pixels / shutterstock.com