Il est facile d'utiliser Google Fonts dans WordPress. Il s'agit d'un répertoire gratuit de plus de 800 polices Web que vous pouvez utiliser sur votre site Web. Le service Google Fonts est un service gratuit de premier ordre utilisé par des millions de sites Web WordPress pour améliorer l'apparence et la convivialité de leur site. Voici comment utiliser les polices Google sur WordPress sans compromettre les performances du site et en améliorant vos scores PageSpeed.
Méthode 1 : Hébergez Google Fonts sur votre serveur WordPress
Étape 1 : Choisissez une police Google
L'utilisation de moins de polices Google Fonts réduira les demandes (moins de polices = moins de demandes).
Sélectionnez les poids de police avec soin - Le nombre de poids de police que vous utilisez aura également une incidence sur la vitesse de chargement de votre page. Pour vous assurer que Google Fonts ne charge que les graisses dont vous avez besoin, décochez les autres afin que seules les conséquences dont vous avez besoin soient emballées.
Étape 2 : Télécharger la police
Le téléchargement de la police constitue la deuxième étape du processus. Il est important de noter que Google télécharge automatiquement tous les poids des polices. Il n'est donc pas nécessaire de sélectionner les poids des polices à ce stade. En revanche, la sélection des poids de police est nécessaire pour la troisième étape.
Étape 3 : Convertir les polices en polices Web
Cliquez sur le bouton Ajouter des polices sur leur site, sélectionnez uniquement les polices que vous utiliserez sur votre site Web, puis téléchargez-les. Il s'agit d'un fichier roboto-regular.ttf et d'un fichier roboto-bold.ttf, donc les deux graisses sont incluses. Comme WOFF et WOFF2 couvrent tous les navigateurs importants, laissez les paramètres tels quels. Cliquez sur le bouton Convertir pour commencer le processus de conversion.
Étape 4 : Télécharger les fichiers de police convertis
Dès que les polices ont été converties, vous pouvez les télécharger. Comme deux polices ont été téléchargées sur notre ordinateur, nous aurons un total de 4 fichiers de polices dans le fichier zip (puisque nous avons téléchargé deux polices, nous aurons quatre fichiers de polices dans le fichier zip).
Étape 5 : Télécharger les fichiers de police dans les fichiers WordPress
Veillez à ce que les fichiers de polices Web soient téléchargés via FTP ou cPanel, idéalement dans le dossier wp-content/uploads, pour éviter qu'ils ne soient écrasés par les mises à jour du thème et du noyau. Nous avons téléchargé les polices dans un dossier "fonts" (afin qu'elles soient séparées des autres fichiers). Vous devriez pouvoir télécharger les polices après avoir ouvert les liens dans votre navigateur, afin de confirmer qu'elles ont bien été téléchargées.
Étape 6 : Ajouter la police personnalisée au CSS
Après avoir téléchargé le fichier zip, nous allons ajouter le CSS stylesheet.css dans le fichier. Le code CSS ci-dessous connecte vos polices à votre CSS existant et les rend disponibles.
Vous pouvez placer le code CSS dans functions.php ou au début de votre fichier style.css. Un fichier CSS externe ou la fonction wp_enqueue_style de WordPress peuvent être utilisés dans le code CSS. Nous allons le coller dans le fichier style.css par défaut du thème. Remplacez toutes les URL relatives par des URL absolues en copiant/collant le code dans la feuille de style.
URLs par défaut du thème dans stylesheet.css :
src : url('Roboto-Bold.woff2') format('woff2'),
url('Roboto-Bold.woff') format('woff') ;
Changer pour :
src : url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff2') format('woff2'),
url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff') format('woff') ;
Pour utiliser facilement la police dans le HTML actuel, créez une classe personnalisée. Classes CSS roboto_font et roboto_bold_font.
.roboto_font {
font-family : "Roboto", "Arial", sans-serif ; }
.roboto_bold_font {
font-family : "Roboto", "Arial", sans-serif ;
font-weight : bold ;
}
Étape 7 : Définir la police par défaut
Pour faire de cette police la police par défaut de votre site Web, vous devez inclure le code CSS dans votre fichier style.css.
Vous devrez peut-être déboguer ou modifier la police pour remplacer les propriétés existantes de la famille de caractères.
L'étape suivante consiste à télécharger le fichier stylesheet.css que vous avez obtenu dans votre fichier nommé stylesheet.css et à ajouter le CSS. Le code CSS ci-dessous permettra à vos polices de fonctionner avec votre CSS existant et sera prêt à être utilisé dès que vous l'aurez saisi. Vous pouvez utiliser une feuille de style externe ou la fonction WordPress wp_enqueue_style pour mettre en file d'attente les feuilles de style.
Méthode 2 : Précharger les polices Web - Optimisation de l'image de marque (Above the Fold)
Si vous utilisez les polices Google, vous devrez peut-être vous référer à la feuille de style préparée par Google et envoyée à votre site Web WordPress depuis les serveurs de Google. Lorsque vous utilisez l'outil de développement proposé par Google Chrome pour inspecter votre site Web, vous pouvez avoir un aperçu du processus en coulisses. Il est possible que vous voyiez deux entrées pour Google Fonts dans Source.
Veuillez voir la photo ci-jointe.
Lorsque vous cliquez sur le lien fonts.googleapis, vous apprenez que la feuille de style pour laquelle vous avez produit l'URL est affichée sur la page ouverte. En outre, un appel est fait au fichier de police spécifique pour chaque déclaration de font-face.
Cela indique que l'utilisateur doit se rendre sur fonts.gstatic.com pour obtenir le poids nécessaire pour la police si un poids de police différent est utilisé. Cette étape peut allonger le temps de chargement de votre page WordPress.
Par conséquent, accédez au fichier functions.php de votre thème actuel, et entrez le code PHP suivant dans la fonction responsable de la gestion des polices.
function twentyeleven_resource_hints( $urls, $relation_type ) {
if ( wp_style_is( 'rumi-fonts', 'queue' ) && 'preconnect' === $relation_type ) {
$urls[] = array(
href' => 'https://fonts.gstatic.com',
"crossorigin,
) ;
}
retourner $urls ;
}
add_filter( 'wp_resource_hints', 'twentyeleven_resource_hints', 10, 2 ) ;
Méthode 3 : Optimiser Google Fonts WordPress en utilisant un plugin
Les plugins, comme c'est le cas pour la plupart des tâches liées à WordPress, simplifient considérablement l'optimisation des Google Fonts. En outre, ils se chargent de l'aspect logiciel pour vous, de sorte que vous n'aurez pas à vous préoccuper de l'emplacement du code dans le système.
Si vous avez installé Google Fonts sur votre site Web WordPress et que vous effectuez un test de performance à l'aide de PageSpeed Insights ou GTmettrix, vous obtiendrez le message d'erreur suivant : fonts.googleapis.com.
Cela se produit parce que les polices Google Fonts ne sont pas compatibles avec la plateforme WordPress. Cela signifie que votre site WordPress doit être optimisé pour les polices Google Fonts.
Un plugin gratuit peut être utilisé pour la fixation de la même. Il s'agit de - OMGF | Host Google Fonts Locally
Une fois l'installation terminée, le plugin commence immédiatement à basculer la méthode WordPress wp en queue script()Google Fonts vers la fonction wp head(). Ce plugin fait tout par lui-même.
Retrouvez d'autres articles de ce type sur Seahawk Media.
