Bien sûr, il existe différents plugins pour utiliser Google Web Fonts dans votre site WordPress, mais si vous développez votre propre thème, vous devrez peut-être y lier étroitement la typographie choisie, en contournant les plugins. Ci-dessous, nous vous montrerons comment utiliser Google Web Fonts dans votre thème.

D'abord, allons sur le site Polices Web Google et sélectionnez la police que nous devons appliquer dans le thème. À l'aide d'outils spéciaux situés sur le côté gauche, vous pouvez affiner la zone de recherche, car il y a vraiment beaucoup de polices. Je savais que j'avais besoin d'une police serif en gras pour les titres et le titre du blog, j'ai donc sélectionné serif dans le menu déroulant Catégories, puis déplacé le curseur Épaisseur vers la droite.

En conséquence, 617 options qui m'ont été proposées ont été éliminées en douceur à 5. Vous avez pas mal d'options à compléter Aperçu polices - vous pouvez voir à quoi ressemblera un mot, une phrase, un paragraphe de texte ou une affiche dans la police sélectionnée. Vous pouvez choisir un texte prédéfini, vous pouvez définir votre propre texte, choisir la taille de police souhaitée.

Une fois que vous avez trouvé la police que vous souhaitez utiliser sur votre site, cliquez simplement sur le bouton Ajouter à la collection.

Vous pouvez ajouter des dizaines de polices à votre collection. Cependant, cela n'est pas toujours nécessaire. Ce n'est pas parce que vous pouvez le faire que vous devriez le faire. Essayez de vous limiter à un maximum de trois polices. Mieux encore, deux. Pour des raisons de performances, j'aime toujours utiliser la police Web sécurisée héritée pour le corps du texte du site et conserver les polices Web pour les titres et autres éléments qui nécessitent une attention ou une attention particulière. Faites attention à la lisibilité de vos polices - n'utilisez pas de police flashy si vos visiteurs ne peuvent pas distinguer ce qui est écrit.

Lorsque vous ajoutez vos polices à la collection, vous les verrez dans la section bleue en bas du site. Une fois que vous avez les polices que vous souhaitez utiliser dans votre collection, cliquez simplement sur le bouton Utiliser.

Après cela, vous serez redirigé vers un écran qui présentera une instruction en quatre étapes. De là, vous apprendrez à utiliser les polices. Si vous souhaitez télécharger les polices sélectionnées pour les utiliser dans éditeur graphique pour les évaluer ou prendre un screenshot.png attrayant pour votre thème, il vous suffit de cliquer sur le bouton Télécharger les polices tout en haut de la page. Si vous souhaitez simplement utiliser la police dans votre thème, vous n'avez pas besoin de la télécharger sur votre ordinateur.

Dans la première étape, vous pouvez choisir les styles et le poids de la police incluse. Dans la deuxième étape, vous pouvez sélectionner le jeu de caractères que vous souhaitez inclure. Vous pouvez également évaluer l'impact de votre collection de polices sur la vitesse de chargement des pages.

Passons maintenant à la troisième étape, qui n'est pas aussi simple que les précédentes. Dans la troisième étape, nous obtenons le code qui doit être ajouté à nos sites - trois différentes options. En sélectionnant l'option Standard - cependant, nous nous écarterons quelque peu des directives de Google pour prendre en charge les méthodes établies pour ajouter des styles aux thèmes WordPress. Dans le code de la version standard, nous copions uniquement l'URL spécifiée comme attribut href pour la balise de lien.

Ouvrez ensuite le fichier functions.php du thème. Nous allons créer une fonction pour charger le CSS que nous utiliserons dans notre thème :

Fonction ggl_load_styles() ( )

Voir le préfixe ggl sur ma fonction ? C'est l'une des pratiques réussies de WordPress. Préfixez toujours les noms de vos fonctions WordPress pour réduire le risque de conflits avec d'autres fonctions de votre thème, thème enfant ou plugins.

Maintenant dans cette fonction, nous devons enregistrer notre feuille de style reçue de Google :

Fonction ggl_load_styles() ( if (!is_admin()) ( wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); ) )

Nous utilisons la fonction wp_register_style. Le premier argument est un descripteur, c'est-à-dire raccourci que nous pouvons utiliser pour faire référence à cette feuille de style plus loin dans notre code. Le deuxième argument est le chemin d'accès au fichier. Nous utilisons l'URL que nous avons reçue à la troisième étape des instructions de Google.

Ensuite, nous incluons notre feuille de style principale pour notre thème. J'espère que vous n'avez pas mis de balise de lien dans la section head de votre fichier header.php ? Si c'est le cas, retournez au fichier et supprimez ce code. Incluez ensuite la feuille de style dans le fichier functions.php :

Fonction ggl_load_styles() ( if (!is_admin()) ( wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); wp_enqueue_style("ggl ", get_stylesheet_uri(), array("googleFont")); ) )

Nous utilisons la fonction wp_enqueue_style. Il a les mêmes arguments que wp_register_style. Tout d'abord, nous lions un descripteur à notre feuille de style. Ensuite, nous obtenons le chemin vers notre feuille de style. Heureusement, dans WordPress, vous pouvez obtenir le chemin en utilisant la fonction get_stylesheet_uri(). Ensuite, nous spécifions les dépendances. Notre fichier style.css dépend de la feuille de style Google Web Fonts.

Enfin, nous utilisons le crochet wp_enqueue_scripts pour appeler notre fonction :

Fonction ggl_load_styles() ( if (!is_admin()) ( wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); wp_enqueue_style("ggl ", get_stylesheet_uri(), array("googleFont")); ) ) add_action("wp_enqueue_scripts", "ggl_load_styles");

Le fichier functions.php est terminé. Nous devons maintenant franchir la dernière étape pour utiliser la police sélectionnée. La quatrième étape de Consignes Google montre les valeurs que nous devons transmettre à la propriété font-family afin d'utiliser notre police. Je veux faire tous mes titres dans la police Holtwood One SC :

h1, h2, h3, h4, h5, h6 ( famille de polices : "Holtwood One SC", serif ; )

Et je veux faire la description du site dans la police Rouge Script :

Description du site ( famille de polices : "Rouge Script", cursif ; )

Tout! Rien d'autre n'a besoin d'être fait ! Vous avez ajouté Google Web Fonts à votre thème WordPress. Utilisez-les de manière responsable !

Salutations chers lecteurs. Aujourd'hui nous allons parler des polices google (google web fonts), comment les télécharger et se connecter au site.

je vais sur le site www.google.com/fonts/, dans le filtre de droite, sélectionnez : 1. la catégorie souhaitée, 2. si nécessaire, triez-les et 3. sélectionnez la langue dont nous avons besoin (si vous avez besoin d'une police russe dans le menu de gauche, sélectionnez cyrillique).

Nous avons donc choisi la police, maintenant vous devez sélectionner son style, pour cela développez le panneau du bas ( Ouvrir le tiroir de sélection) et allez dans l'onglet PERSONNALISER et choisissez les styles et les langues que vous souhaitez.

Pour télécharger cliquez sur le bouton télécharger.

Connexion de la police téléchargée

Copiez les polices contenues dans l'archive dans le dossier /fonts, qui doit se trouver dans le même répertoire que le dossier /css de votre site HTML.

Connexion standard polices téléchargées Ressemble à ça

@font-face ( font-family: "Font_name_any"; src: url("Font_file_name.eot"); src: url("Font_file_name.eot?#iefix") format("embedded-opentype"), url("Font_file_name .woff") format("woff"), url("FontFileName.ttf") format("truetype"), url("FontFileName.svg#DSNoteRegular") format("svg"); font-weight: normal; font -style : normal ; )

Dans mon cas, la connexion ressemblera à ceci

/* Code pour inclure la police dans /css/style.css */ @font-face ( font-family: "RobotoRegular"; url("../fonts/RobotoRegular.ttf") format("truetype"); font- style : normal ; poids de la police : normal ; )

Afin de connecter la police de votre choix au site, rendez-vous dans l'onglet intégrer, vous y verrez 2 façons de vous connecter :

1 NORME

Code donné doit être ajouté à la section votre document HTML.

2. @IMPORTER

@importurl("https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic");

Important. Quelle que soit la méthode de connexion, utilisez les règles CSS suivantes pour définir ces familles : font-family: 'Roboto', sans-serif; plus à ce sujet ci-dessous.

Google Fonts est l'une des meilleures ressources pour les polices Web gratuites, et Google vous propose plusieurs façons de les importer sur votre site Web. Malheureusement, aucun d'entre eux n'inclut le moteur WordPress populaire. Cela signifie que vous devez soit utiliser des plugins, dont il y en a beaucoup, soit vous salir les mains en bricolant du code.

La bonne nouvelle est que vous pouvez installer n'importe quelle police de la bibliothèque Google sur presque tous les thèmes WordPress sans trop de tracas. Comment exactement - nous vous apprendrons aujourd'hui.

Il y a deux options - connecter le plugin ou jouer un peu avec le fichier functions.php.

Mais d'abord, je voudrais énumérer les avantages et les inconvénients de Google Des polices pour que vous puissiez enfin décider de les utiliser ou non dans vos projets.

Bonnes et mauvaises polices Web Google

En ce qui concerne les polices Web, Google est l'un des les meilleures options en termes de performances . Tout cela à cause de la conception légère et du système de mise en cache. Les visiteurs n'ont pas besoin d'attendre que les polices Google se chargent s'ils ont récemment visité un site qui les a utilisées. Les polices populaires comme Open Sans peuvent améliorer les performances de votre site en réduisant les temps de chargement.

Une autre caractéristique est que Google vous permet de télécharger ces polices , afin que vous puissiez les utiliser dans vos mises en page.

et enfin la plateforme est entièrement gratuite . Pour commencer à utiliser les polices, il vous suffit de vous connecter ou de démarrer boites aux lettres sur Gmail (qui n'a pas Gmail aujourd'hui ?).

Des lacunes tu peux préciser que le choix des polices google est petit beaucoup d'entre eux sont similaires les uns aux autres. Vous devez passer beaucoup de temps à chercher pour trouver une police décente et originale. Il existe très peu de polices pour le cyrillique.

De plus, il existe des points communs problèmes de sécurité - vous devez fournir certaines données personnelles lors de l'installation des polices de Google sur votre site.

Comment installer les polices Google à l'aide des plugins WordPress

Si vous recherchez des plugins, la première chose que vous verrez dans les résultats de la recherche est Plugins WP Google Fonts et Easy Google Web Fonts . Ce sont vraiment deux des meilleurs plugins.

Les plugins ne sont pas la solution idéale pour Installations Google polices sur un site WordPress - non seulement en termes de performances, mais aussi parce que les plugins ne vous permettent pas de sélectionner certains morceaux de texte. Cependant, si vous ou votre client êtes convaincu qu'il est préférable d'utiliser des plugins, examinez ces deux options.

Ce plugin vous permet de cibler des éléments spécifiques tels que les titres H1, les paragraphes et les citations. Vous obtenez également une option CSS personnalisée pour la poursuite des travaux avec des styles de police individuels. Ajouter et personnaliser des polices Google sur votre site WordPress est assez facile avec ce plugin.

Easy Google Web Fonts porte bien son nom et facilite l'installation de Google Fonts, même pour les débutants. Vous pouvez utiliser la fonction d'aperçu en direct pour afficher, tester et optimiser les polices sans quitter le site Web et créer vos propres règles de police sans écrire une seule ligne de code.

La bonne façon d'installer Google Fonts dans un modèle WordPress

En fin de compte, nous arrivons à l'option d'ouvrir le fichier functions.php et de jouer un peu avec le code. Avant de pouvoir le faire, vous devez sélectionner une police dans la bibliothèque Google. À titre d'exemple, essayons de prendre un exemple très populaire Ouvrir Sans.

Ensuite, vous devez choisir un style de police - normal, gras ou italique. Tu peux le faire toi-même :)

Après avoir sélectionné les styles, Google vous fournira un extrait de code. Le nôtre ressemble à ceci :

De plus, nous avons le style CSS :

famille de polices : "Open Sans", sans empattement ;

Il est maintenant temps d'ouvrir le fichier functions.php (chemin du fichier : wp-content/themes/yourtheme). A la fin du fichier, ajoutez une nouvelle fonction :

fonction load_fonts()
{
wp_register_style("et-googlefonts",
"http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300"); wp_enqueue_style("et-googlefonts");
}
add_action("wp_print_styles", "load_fonts");

La clé de cette fonctionnalité est la commande "wp_enqueue_style", qui oblige WordPress à appeler les feuilles de style de police dans l'en-tête de chaque page. Si vous regardez attentivement, vous verrez que nous avons supprimé le lien href= et rel='stylesheet' type'text/css' du code que Google nous a fourni et vous devrez faire de même si vous souhaitez ajouter une autre police Google pour votre site WordPress.

Tout ce que vous avez à faire maintenant est d'ouvrir le fichier CSS principal et de le coller dans le style Open Sans. Les règles habituelles s'appliquent ici, alors ajoutez le code suivant à votre feuille de style, enregistrez et mettez à jour :

corps
{
police : normale 1em "Open Sans", sans empattement ;
couleur : #313131 ;
}

Ce style fonctionnera sur tout le site. Vous pouvez définir un style différent pour des fragments de texte individuels :

Texte en gras
{
police : gras 1em "Open Sans", sans empattement ;
}

Comme vous pouvez le voir, c'est en fait très simple. Essayez et vérifiez le résultat :)

La première partie du chapitre est consacrée à une introduction à Polices CSS. Sur cette page, vous apprendrez comment inclure des polices dans CSS, ce que sont les polices Web et comment les utiliser, quels formats de police sont disponibles, comment utiliser Google Fonts. Examinons d'abord un exemple simple d'inclusion d'une police CSS :

P ( famille de polices : Verdana; )

Ce petit bout de code signifie que toutes les balises

Police Verdana appliquée. La propriété font-family définit la police ou la famille de polices qui sera utilisée. L'affichage correct de ce style dans le navigateur de l'utilisateur dépend de l'installation ou non de la police spécifiée sur l'ordinateur de l'utilisateur. Dans notre cas, si l'ordinateur de l'utilisateur ne dispose pas de la police Verdana, le navigateur affichera la police par défaut.

À un moment donné, les concepteurs devaient également spécifier plusieurs polices de rechange au cas où la principale manquait sur l'ordinateur de l'utilisateur. Supposons que vous souhaitiez styliser votre texte dans Verdana et utiliser Trebuchet MS, Geneva et n'importe quelle police sans empattement comme solutions de secours. Il s'écrit comme ceci :

P ( famille de polices : Verdana, "Trebuchet MS", Genève, sans empattement ; )

Lors du traitement de ce code, le navigateur vérifiera d'abord la présence de la police Verdana sur l'ordinateur de l'utilisateur. Si la police est présente, le contenu des balises

Affiché dans cette police. Si la police est manquante, le navigateur recherchera la police suivante dans la liste, Trebuchet MS. Si cette police est également manquante, la présence de la police suivante, Genève, sera vérifiée. Si l'ordinateur de l'utilisateur n'a pas également Genève, le navigateur sélectionnera une autre police sans empattement disponible et affichera le texte qu'elle contient.

Noter: dans le code, nous avons écrit le nom de la police Trebuchet MS entre guillemets. Il est nécessaire de mettre le nom de la police entre guillemets doubles ou simples lorsqu'elle contient des espaces.

Vous pouvez lire ce qu'est une police avec empattements (serif) et sans (sans-serif) sur la page Wikipedia.

Polices Web

La manière ci-dessus d'utiliser les polices présente un énorme inconvénient - vous êtes limité dans le nombre de polices. Vous devrez vous contenter uniquement des options qui sont probablement installées sur la plupart des ordinateurs.

Comment pouvez-vous augmenter le choix de polices pour rendre la conception de la page individuelle, ajouter de l'originalité ? Les polices Web viennent à la rescousse. Lisez le chapitre plus loin et vous apprendrez comment travailler avec eux.

Ainsi, afin d'afficher la police souhaitée dans le navigateur de l'utilisateur, nous avons besoin que cette police soit téléchargée sur son ordinateur. C'est assez facile à faire. Cette méthode de connexion des polices au CSS ouvre de très larges possibilités aux concepteurs. Mais il convient de mentionner une mouche dans la pommade: premièrement, tous les navigateurs ne prennent pas en charge un certain format de police (ce qui entraînera le fait que la police ne s'affiche pas), et deuxièmement, si le fichier de police est volumineux, il peut ralentir chargement des pages.

Prise en charge des formats

Comment traiter le problème d'incompatibilité de format de fichier ? Jetons un coup d'œil au tableau montrant les formats de police les plus populaires et découvrons quels navigateurs les prennent en charge :

Noter: Vous pouvez toujours trouver des informations à jour sur la prise en charge des formats de police sur caniuse.com. Vous devez entrer le nom du format dans la barre de recherche (par exemple, ttf).

Si vous ciblez les navigateurs modernes, il vous suffira d'utiliser le format de police TTF - le plus courant et le plus utilisé. Dans le cas où vous avez besoin de plusieurs formats de la même police, vous pouvez utiliser des convertisseurs en ligne spéciaux d'un format à l'autre, puis connecter tous les fichiers un par un. Ainsi le navigateur pourra choisir le format de police avec lequel il travaille.

Inclure une police Web en utilisant @font-face

Supposons que vous ayez votre propre police unique appelée MyUniqueFont au format TTF et que vous souhaitiez que le corps du texte de votre page Web s'affiche dans cette police. La première chose à faire est de copier le fichier de police dans le dossier où se trouvent tous les autres fichiers du site. Afin de ne pas créer de désordre, vous pouvez créer dossier séparé spécifiquement pour les polices, en les nommant, par exemple, fonts .

@font-face ( font-family: MyUniqueFont; src: url("fonts/MyUniqueFont.ttf"); )

La propriété font-family dans ce cas joue un rôle différent : avec elle, nous attribuons un nom à la police, afin que nous puissions utiliser ce nom plus tard lors de l'écriture d'un style :

P ( famille de polices : MyUniqueFont; )

La deuxième ligne spécifie le chemin d'accès au fichier de police. Dans notre exemple, le fichier MyUniqueFont.ttf se trouve dans le dossier des polices. Votre URL peut être différente.

Polices Google

Google facilite l'inclusion de n'importe quelle police de la collection Google Fonts. Tout ce que vous avez à faire pour commencer à utiliser la police que vous aimez est de spécifier quelques paramètres sur la page de la police sur Google, puis de copier le lien spécial vers cette police et de l'ajouter à votre document Web.

Noter: toute la collection de polices de Google est disponible sur le site Polices Google. Sur la page, vous pouvez utiliser différents filtres pour rechercher des polices par catégorie, épaisseur, alphabet.

Ci-dessous, nous décrirons chaque étape de la connexion d'une police de Google. Pour comprendre ce Dans la question, sélectionnez n'importe quelle police de Pages Google Fonts et ouvrez-le en cliquant sur le bouton Quick-use.

Étape 1 : choisissez un style

Tout d'abord, sur la page de la police sélectionnée, des options pour son style seront affichées, ainsi qu'une icône de compteur de vitesse, qui ne signifie rien de plus que la vitesse de chargement de la police. Plus vous choisissez de styles de police, plus le temps de chargement sera long. Par conséquent, il est recommandé de sélectionner uniquement les styles que vous prévoyez d'utiliser.

Étape 2 : choisissez un alphabet

Plus loin sur la page, il est possible de sélectionner un jeu de caractères : latin, cyrillique, etc. Selon la police, toutes les variantes de l'alphabet peuvent ne pas être disponibles dans celle-ci. Semblable au paragraphe précédent, il est préférable de cocher la case uniquement devant l'alphabet dont vous avez besoin.

Étape 3 : ajouter du code au site

La première méthode consiste à ajouter un lien vers le serveur de Google dans le code HTML, à partir duquel la police est téléchargée. Vous devez copier le morceau de code déjà terminé et le placer entre les balises dans votre document HTML. Exemple:

...

La deuxième méthode consiste à inclure la police à l'aide de la directive @import. Code prêt situé dans le deuxième onglet du point 3 de la page de la police Google sélectionnée. Il doit être ajouté tout en haut de votre feuille de style (sinon le fichier ne sera pas importé). Le code ressemble à ceci :

@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);

La particularité de la première méthode est que vous devrez ajouter un lien vers la police dans l'en-tête de chaque page où vous comptez l'utiliser. Ceci est facile à mettre en œuvre sur des sites avec un petit nombre de pages, mais problématique pour des ressources importantes. La deuxième méthode est pratique car le code peut être placé au tout début d'une feuille de style externe, puis toutes les pages auxquelles cette table est connectée recevront la police nécessaire, qui sera chargée à l'aide de la directive @import.

Étape 4 : styliser

Après avoir terminé les étapes précédentes, vous pouvez commencer à appliquer la police. Vous avez déjà vu comment une telle règle CSS est écrite :

P ( famille de polices : "Roboto", sans empattement ; )

Si dans la première étape vous avez choisi plusieurs options de police (par exemple, vous avez ajouté la police Bold 700 gras), alors dans la troisième étape le code changera un peu :

@import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);

Pour ensuite mettre la police en gras, écrivez le style CSS comme ceci :

P ( famille de polices : "Roboto", sans empattement ; poids de la police : 700 ; )

Noter: dans Google Fonts, seules les unités standard comprises entre 100 et 900 sont utilisées pour indiquer le poids d'une police. Par exemple, normal (par défaut) équivaut à 400 (normal) et gras standard équivaut à 700 (gras).

Principaux avantages ServiceGoogle polices est :

• facilité d'utilisation (même un débutant peut gérer le service, et tout le code nécessaire est généré automatiquement - il ne reste plus qu'à le copier);
• disponibilité des polices (pas besoin de les payer) ;
• tous les formats de police utilisés sont fournis (cela signifie que chaque navigateur pourra charger exactement le format de police avec lequel il fonctionne).

Parmi les lacunes du service, il n'y a pas une très grande variété de polices, en particulier les polices cyrilliques. Soit dit en passant, il existe d'autres services similaires sur Internet, par exemple TypeKit (payant).

Résultats

Aujourd'hui, nous avons plusieurs options pour connecter des polices originales et non standard aux pages Web. Chacune de ces méthodes a ses avantages et ses inconvénients. Quelle option est préférable d'utiliser, vous devez déterminer par vous-même. Cela dépend souvent de la situation, et différentes approches peuvent être utiles dans différents cas. À ce stade, il vous suffit de savoir comment utiliser les polices en CSS.

Une excellente source de polices pour les concepteurs de sites Web. À WPBv4 commencé à utiliser une combinaison de polices populaire Police Google: casques Oswald et Lora. Certains utilisateurs ont posé des questions pour savoir si les polices Google peuvent être utilisées dans les thèmes WordPress et comment le faire. Cet article explique comment ajouter Google Web Fonts à Thèmes WordPress droit sans affecter les performances de votre site.

Trouver les polices Web Google que vous aimez

Vous devez d'abord trouver les polices de Google que vous aimez. Recherchez des options parmi les polices suggérées dans la bibliothèque appelée Bibliothèque de polices Google. Une fois que vous avez trouvé une option appropriée, cliquez sur le bouton Utilisation rapide:

Après avoir cliqué sur ce bouton, vous serez nouvelle page. Faites défiler jusqu'à ce que vous voyiez un formulaire appelé " Ajoutez ce code à votre site Web":

Copiez le code et collez-le dans le bloc-notes, nous l'utiliserons plus tard. Habituellement, au moins 2 polices différentes sont utilisées. Par exemple, dans notre pratique, des polices ont été utilisées Oswald + Lora. La procédure décrite ci-dessus doit donc être répétée pour la deuxième police.

Ajouter des polices Web Google à votre thème WordPress

Il existe trois façons principales d'ajouter des polices de Google à votre site Web. Par exemple, il existe un moyen standard, un moyen d'importer @importer et en ajoutant avec javascript. Habituellement, l'une des deux premières méthodes est utilisée.

Le plus simple est d'ouvrir votre fichier de thème style.css et collez le code suivant lié à la police ajoutée (rappelez-vous, nous l'avons copié dans le bloc-notes à la première étape):

@URL d'importation (http://fonts.googleapis.com/css?family=Lora); @URL d'importation (http://fonts.googleapis.com/css?family=Oswald);

C'est ce que beaucoup de gens font StudioPress, Genèse). Mais, néanmoins, ce n'est pas une méthode tout à fait correcte pour ajouter des polices ouvertes. Utilisation de la méthode @importer bloque les téléchargements parallèles, obligeant le navigateur Web à télécharger le fichier de police jusqu'à la fin avant de continuer à télécharger le reste du contenu de votre site Web. Par conséquent, bien que cette méthode semble commode, elle ne l'est pas Le meilleur moyen pour travailler avec la police, si vous vous souciez de la vitesse et des performances de votre site. Vous pouvez en savoir plus sur ces détails ici.

Le mieux serait de combiner les demandes de différentes polices Google dans une requête pour éviter les requêtes HTTP excessives. Voici comment procéder. Ajout de code :

@import url(http://fonts.googleapis.com/css?family=Lora|Oswald);

Même si vous êtes obligé d'utiliser @importer, combinez au moins plusieurs requêtes en une seule.

Comment ajouter Google Web Fonts sans compromettre les performances du site Web

Le mieux serait d'utiliser méthode standard, qui utilise des liens plutôt que des importations de fichiers. Prenez juste deux adresses URL dès la première étape de ce guide. Combinez 2 polices différentes en ajoutant un symbole entre elles | . Ensuite, placez le code résultant dans un bloc tête votre sujet. Pour ce faire, vous devrez éditer le fichier header.php et ajoutez-y le code de la feuille de style. Vous devriez obtenir quelque chose comme ceci :

objectif principal consiste à ajouter une demande de police à un stade précoce. D'après le blog du projet Polices Web Google s'il y a une balise de script avant la déclaration de police @fontface, alors Internet Explorer rien ne s'affichera sur la page jusqu'à ce que le fichier de police lui-même soit chargé.

Après avoir terminé cette étape, vous pouvez simplement utiliser l'extrait de code et la police résultants dans le fichier CSS votre sujet. Cela ressemblera à ceci :

H1 ( famille de polices : "Oswald", Helvetica, Arial, serif ; )

Il y a pas mal de thèmes et de cadres enfants. Non recommandé modifier les fichiers du thème parent, surtout si vous utilisez un framework ; car les modifications apportées au thème seront effacées à chaque mise à jour de la version du framework. Vous devrez travailler sur les add-ons et les filtres dans le thème parent ou son framework si vous souhaitez ajouter correctement les polices Google aux thèmes enfants.

Par exemple, si vous regardez la page plan, l'équipe a créé le thème WPBv4 en tant que thème enfant personnalisé à partir du framework Genèse. Voyons comment ajouter des polices Web Google à un thème enfant basé sur Genèse.

Comment ajouter des polices Web Google au thème enfant basé sur Genesis

Ouvrir le thème enfant et son fichier fonctions.php et ajoutez le code suivant à ce fichier :

Add_action("genesis_meta", "wpb_add_google_fonts", 5); fonction wpb_add_google_fonts() ( echo " "; }

La principale chose à faire est de regarder le code à l'intérieur du bloc genesis_meta. Par défaut, il existe des options comme META- descriptifs, mots clés, feuilles de style, favicons, etc. Spécification de la priorité 5 , nous nous assurerons que la feuille de style est chargée avant que la feuille de style principale ne soit chargée.

Malheureusement, nous ne pouvons pas couvrir tous les parents et frameworks existants. Si vous avez des questions sur des thèmes spécifiques, veuillez les poser aux développeurs et aux auteurs de thèmes dans les fils de discussion appropriés des forums de développeurs de thèmes.

Notre dernier conseil concernant Polices Web Google sur votre site : ne posez pas de questions et n'expérimentez pas avec des polices que vous n'avez pas l'intention d'utiliser. Par exemple, si vous ne voulez que des polices normales et en gras, n'utilisez pas ou ne personnalisez pas tous les autres styles possibles pour une police particulière. Nous espérons que cet article vous aidera à configurer et à utiliser correctement Google Web Fonts sur votre site WordPress.