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 Web. Voici comment utiliser les polices Google sur WordPress sans compromettre les performances du site et améliorer vos PageSpeed .
Méthode 1 : hébergez Google Fonts sur votre serveur WordPress
Étape 1 : Choisissez une police Google
Utiliser moins de polices Google réduira les requêtes (moins de polices = moins de requêtes).
Sélectionnez soigneusement les épaisseurs de police – Le nombre d’épaisseurs de police que vous utilisez affectera également la vitesse à laquelle votre page se charge. Pour vous assurer que Google Fonts charge uniquement les pondérations 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échargez la police
Le téléchargement de la police est la deuxième étape du processus. Il est important de noter que Google téléchargera automatiquement toutes les épaisseurs de police. Il n'est donc pas nécessaire de sélectionner les épaisseurs de police à ce stade. Au lieu de cela, la sélection des épaisseurs 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 et téléchargez-les. Il s'agit d'un fichier roboto-regular.ttf et d'un fichier roboto-bold.ttf, donc les deux poids sont inclus. 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échargez les fichiers de polices convertis
Une fois les polices converties, vous pouvez les télécharger. Puisque 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 des fichiers de polices vers des fichiers WordPress
Veuillez vous assurer que les fichiers de polices Web sont téléchargés via FTP ou cPanel , idéalement dans le dossier wp-content/uploads, pour éviter d'être écrasés par les mises à jour de thème et de base. Nous avons téléchargé les polices dans un dossier « polices » (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 pouvoir confirmer qu'elles ont été téléchargées avec succès.
Étape 6 : Ajouter une police personnalisée au CSS
Après avoir téléchargé le fichier zip, nous ajouterons 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 function.php ou démarrer votre fichier style.css. Un fichier CSS externe ou la fonction wp_enqueue_style de WordPress peut être utilisé dans le code CSS. Dans le fichier style.css par défaut du thème, nous le collerons. Remplacez toutes les URL relatives par des URL absolues en copiant/collant le code dans la feuille de style.
URL par défaut du thème dans stylesheet.css :
src : url('Roboto-Bold.woff2') format('woff2'),
url('Roboto-Bold.woff') format('woff');
Remplacer par :
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 {
famille de polices : « Roboto », « Arial », sans empattement ; }
.roboto_bold_font {
famille de polices : « Roboto », « Arial », sans empattement ;
poids de la police : gras ;
}
É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 de famille de polices existantes.
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ête à être utilisée dès que vous l'entrerez. Vous pouvez utiliser une feuille de style externe ou la fonction WordPress wp_enqueue_style pour mettre les feuilles de style en file d'attente.
Méthode 2 : précharger les polices Web – optimisation au-dessus du pli
Si vous utilisez Google Fonts, 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 consulter la photo ci-jointe ici.
Lorsque vous cliquez sur le fonts.googleapis , vous apprendrez que la feuille de style pour laquelle vous avez produit l'URL est affichée sur la page ouverte. De plus, un appel est effectué vers le fichier de police spécifique pour chaque déclaration font-face.
Cela indique que l'utilisateur doit visiter 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 function.php de votre thème actuel et entrez le code PHP suivant dans la fonction responsable de la gestion des polices.
fonction vingteleven_resource_hints( $urls, $relation_type ) {
if ( wp_style_is( 'rumi-fonts', 'queue' ) && 'preconnect' === $relation_type ) {
$urls[] = tableau(
'href' => 'https://fonts.gstatic.com',
'origine croisée',
);
}
renvoyer les $urls ;
}
add_filter( 'wp_resource_hints', 'twentyeleven_resource_hints', 10, 2 );
Méthode 3 : optimiser Google Fonts WordPress à l’aide du plugin
Les plugins, comme c’est le cas pour la plupart des tâches liées à WordPress, simplifient grandement l’optimisation des polices Google. De plus, ils s'occuperont de l'aspect logiciel pour vous, vous n'aurez donc pas à vous soucier de l'endroit où le code doit aller dans le système.
Si Google Fonts est installé sur votre site Web WordPress et que vous exécutez un test de performances à l'aide de PageSpeed Insights ou GTmettrix, vous recevrez le message d'erreur suivant : fonts.googleapis.com.
Cela se produit parce que les polices Google ne sont pas compatibles avec la plateforme WordPress. Cela indique que votre site WordPress doit optimiser ses polices Google.
Un plugin gratuit peut être utilisé pour la fixation de celui-ci. C’est – OMGF | Héberger les polices Google localement
Une fois l’installation terminée, le plugin commencera immédiatement à basculer la méthode WordPress wp en queue script()Google Fonts vers la fonction wp head(). Ce plugin fait tout tout seul.
Trouvez d’autres articles de ce type sur Seahawk Media .
