Bien sûr, il existe différents plugins pour utiliser Google Web Fonts sur votre site WordPress, mais si vous développez votre propre thème, vous devrez peut-être y coupler é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 fin de compte, les 617 options qui m'ont été proposées sont tombées en douceur à 5. Vous disposez de plusieurs options pour prévisualiser les 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 un éditeur graphique, les évaluer ou prendre une capture d'écran attrayante.png 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 options différentes. 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 des instructions de Google montre quelles valeurs 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 !

Vlad Merjevitch

La police fait partie intégrante de la conception Web, confère au site expressivité et reconnaissance, exprime le style caractéristique du site et est directement liée à la perception des textes. Une police bien choisie peut ne pas être remarquée, mais sans elle, il n'y aura pas de zeste qui complète la conception du site.

Si vous avez déjà une police spécifique installée sur votre ordinateur, ajoutez simplement une ligne dans les styles.

h1 ( famille de polices : SuperPuperFont ; )

La valeur de la propriété font-family est le nom de la famille de polices, elle s'appliquera à tous les titres

. Mais que verront les visiteurs du site s'ils n'ont pas installé notre police spectaculaire et rare ? Cette situation est la plus probable, donc si le navigateur ne reconnaît pas la police déclarée, il utilisera la police par défaut, par exemple, sous Windows c'est Times New Roman. Toute notre conception de caractères soigneusement pensée s'effondrera et tombera en poussière du jour au lendemain, nous devons donc rechercher la solution la plus universelle. La première chose qui vient immédiatement à l'esprit est d'organiser le téléchargement du fichier de police sur l'ordinateur de l'utilisateur et d'afficher le texte dans la police sélectionnée. Comparée à d'autres méthodes telles que l'affichage de texte à travers une image, cette méthode est la plus simple et la plus polyvalente.

Quels sont les avantages de télécharger un fichier de police puis de l'appliquer via CSS.

• Le texte est facile à ajouter et à modifier.
• Dans le navigateur, vous pouvez utiliser la recherche et trouver les phrases souhaitées.
• Dans les paramètres du navigateur, vous pouvez réduire ou augmenter la taille de la police pour obtenir une visualisation confortable.
• Les moteurs de recherche indexent bien le contenu des documents.
• Le texte peut être sélectionné et copié dans le presse-papiers, ainsi que traduit dans une autre langue.
• Les paramètres de texte tels que l'espacement des lignes, la couleur, la taille, etc. sont faciles à modifier à l'aide des propriétés CSS.
• Encore une fois, en utilisant CSS, il est facile d'ajouter différents effets au texte, comme une ombre.

Comme vous pouvez le voir, il y a beaucoup d'avantages. Il y a aussi des inconvénients mineurs et pour l'équilibre, ils méritent d'être mentionnés.

• Toutes les versions de navigateur ne prennent pas en charge les polices téléchargeables et le format un pour tous.
• Un fichier contenant une police de caractères peut prendre beaucoup de place, ralentissant ainsi le chargement d'une page Web.

En tableau. 1 répertorie les versions de navigateur et les formats de police qu'ils prennent en charge.

Languette. 1. Formats pris en charge

Format	Internet Explorer	Chrome	Opéra	safari	Firefox	Android	iOS
TTF	9.0+	4.0+	10.0+	3.1+	3.5+	2.2+
EOT	5.0-8.0
WOFF	9.0+	5.0+			3.6+
SVG		1.0+	9.0+	3.1+	3.5+		1.0+

Le format le plus pris en charge est TTF. A l'exception d'IE jusqu'à la version 9.0 et d'iOS, tous les navigateurs le comprennent parfaitement. Donc, si vous avez une police dans ce format et que vous ciblez les navigateurs modernes, vous n'aurez pas à faire d'étapes supplémentaires. Il suffit d'écrire le code suivant dans les styles (exemple 1).

Exemple 1 : Connexion TTF

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Tout d'abord, nous chargeons le fichier de police lui-même en utilisant la règle @font-face. À l'intérieur, nous écrivons le nom de la famille de polices via le paramètre font-family et le chemin d'accès au fichier via src . Ensuite, utilisez la police comme d'habitude. Donc, si nous devons définir la police d'en-tête, alors pour le sélecteur h1, comme indiqué dans l'exemple, nous définissons la propriété font-family avec le nom de la police chargée. Pour les anciennes versions d'IE, nous listons les solutions de secours séparées par des virgules. Dans ce cas, la police du titre sera "Comic Sans MS" car IE8 et les versions antérieures ne prennent pas en charge le format TTF.

Le résultat de cet exemple est montré sur la Fig. une.

Riz. 1. Titre avec police téléchargée

Et si vous avez désespérément besoin d'une police ornée dans IE8 ? Heureusement, @font-face vous permet d'inclure plusieurs fichiers de polices de formats différents en même temps. Le navigateur n'a qu'à choisir celui qui convient. Ainsi, une solution universelle qui fonctionne dans tous les navigateurs se résume à convertir le format TTF existant en EOT, puis à inclure les deux fichiers.

Pour la conversion, il existe plusieurs services en ligne qui vous permettent de télécharger un fichier TTF et d'obtenir un fichier EOT en sortie. Malheureusement, la plupart de ces services ont le même problème - nous recevons le fichier, mais la langue russe n'y est pas prise en charge. En conséquence, le résultat souhaité n'est pas atteint, la conversion est incorrecte. Parmi les sites que j'ai consultés, il y en avait un qui affichait correctement le texte dans IE.

Nous allons sur ce site, téléchargeons le fichier TTF et cliquons sur le bouton "Convertir TTF en EOT", après quoi nous enregistrons le fichier résultant dans le dossier des polices. Dans les styles, il reste à faire une petite astuce et à faire en sorte que différents navigateurs téléchargent la police au bon format. Pour ce faire, ajoutez deux paramètres src. Le premier pointe vers le fichier EOT et concerne les anciennes versions d'IE. Le deuxième paramètre src doit contenir deux adresses séparées par des virgules, dont l'une pointe vers un fichier TTF. Le fait est qu'IE version 8.0 et antérieure ne comprend pas la virgule dans le paramètre src et, par conséquent, ignorera l'intégralité du paramètre. Il peut y avoir plusieurs options d'orthographe, par exemple, répéter url , spécifier le nom de la police dans le paramètre local ou même écrire une police inexistante. Si le navigateur ne peut pas charger une telle police, il ira à la deuxième de la liste et nous l'aurons écrite correctement. Orthographes acceptables.

src : url(fonts/pompadur.ttf), url(fonts/pompadur.ttf);
src : local(pompadur), url(fonts/pompadur.ttf);
src : local("blabla"), url(fonts/pompadur.ttf);

Une version de travail de la connexion de la police pour toutes les versions de navigateurs est illustrée dans l'exemple 2.

Exemple 2 : Connexion EOT

HTML5 CSS3 IE Cr Op Sa Fx

Élément moderne du processus politique

En fait, la doctrine politique de Montesquieu est à l'avant-garde du type continental européen de culture politique, qui se reflète dans les écrits de Michels.

Quant à iOS, il me semble qu'il n'y a pas grand intérêt à créer et télécharger une police séparée au format SVG. L'audience des sites qui le consultent via iOS est encore faible, de plus, ils essaient d'alléger la version du site pour les appareils mobiles, et il n'est pas conseillé de télécharger quelques dizaines de kilo-octets supplémentaires.

Polices Web Google

Un service pratique qui prend en charge la routine de prise en charge de différents formats de police et versions de navigateur peut être trouvé sur www.google.com/webfonts. Bien qu'il y ait relativement peu de polices différentes dans la collection (il y en a plusieurs dizaines), elles sont toutes sélectionnées de très haute qualité et utilisables gratuitement sur les sites Web.

Avant de choisir une police, changez la valeur Script en cyrillique, puis vous verrez une liste de polices prenant en charge la langue russe (Fig. 2).

Riz. 2. Choisir les polices dans Google Web Fonts

La police que vous aimez doit d'abord être ajoutée à la collection en cliquant sur le bouton "Ajouter à la collection", puis sur le bouton "Utiliser" dans le coin inférieur droit de l'écran. Sur la page suivante (fig. 3), vous pouvez enfin sélectionner les polices dont vous avez besoin. Dans le même temps, il faut comprendre qu'une police de caractères peut contenir plusieurs styles, et chacun d'eux augmente le volume de fichiers téléchargés.

Riz. 3. Polices chargées sur la page

Vous pouvez connecter les polices sélectionnées de trois manières, le code ajouté peut être copié sur la page.

1. Traversant l'élément . La ligne ressemblera à ce qui suit.

2. Via la règle @import. Insérez cette ligne dans votre fichier CSS tout en haut.

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

3. Via JavaScript.

En principe, tous les chemins sont égaux, alors choisissez selon vos préférences.

Les avantages de l'utilisation de ce service sont les suivants.

• Les polices sont gratuites, vous n'avez pas à les payer.
• Les polices proposées sont "affinées" pour l'affichage à l'écran, les fichiers sont optimisés et occupent une quantité relativement faible.
• Le navigateur est détecté automatiquement et une police au format requis est émise pour celui-ci.

L'un des principaux avantages du service est que les polices sont stockées aux formats TTF, EOT, WOFF, SVG et sont chargées après vérification du navigateur. Ainsi, le format EOT ne sera disponible que pour les anciennes versions d'IE.

Que vous utilisiez ou non Google Web Fonts, c'est à vous de décider. Si vous n'y avez pas trouvé de police appropriée, vous pouvez toujours connecter le TTF populaire et commun. De plus, il est pris en charge par les dernières versions de tous les navigateurs populaires.

Bonjour! À ce sujet, j'ai écrit dans la leçon 132, vous pouvez lire. Et dans cet article, je vais vous expliquer comment connecter facilement et rapidement une police à votre site depuis Google Fonts. Sur le service Google Font, vous devez choisir une police pour votre site, puis la connecter.

Il n'est pas nécessaire de télécharger le fichier de police sur l'hébergement. Il suffit d'inscrire le code HTML nécessaire dans l'en-tête du site, et dans le nom de la nouvelle police. Les polices peuvent être connectées non seulement à un site WordPress, mais également à tout autre site.

Comment connecter Google Fonts au site

Nous allons au service Google Font sur ce lien et sélectionnons la police dont nous avons besoin.
Les polices peuvent être sélectionnées via le filtre. Autrement dit, nous définissons les paramètres, et ainsi le service trouve les polices avec les paramètres sélectionnés.

Vous pouvez définir d'autres paramètres si vous le souhaitez : épaisseur (épaisseur de la police), inclinaison (oblique), largeur (largeur de la police).

Vous devez également sélectionner Cyrillique si votre site est en russe : cirillique (cyrillique) ou cirillique étendu (cyrillique étendu).

Lorsque les options sont sélectionnées, le service affichera toutes les polices qui les accompagnent.

Nous amenons le curseur de la souris sur la police que nous voulons installer sur le site, après quoi des paramètres / paramètres supplémentaires apparaissent: Quick-use (utilisation rapide), Pop out (afficher la police dans une fenêtre séparée) et Add to Collection (ajouter à la collecte).

Choisir " Utilisation rapide» et voyez un widget sous la forme d'un compteur de vitesse sur le côté droit. Il montre à quelle vitesse la police sélectionnée est chargée. Plus le nombre sur ce compteur de vitesse est bas, mieux c'est.

Encore plus bas, vous pouvez choisir l'une des trois options d'installation de la police sur le site : standart, @import ou javascript.

Chaque option contient des instructions en anglais sur la façon de connecter correctement la police au site. Je vais vous montrer la première option la norme' parce que c'est plus simple.

Copiez la ligne surlignée en rouge, puis collez-la dans le fichier header.php entre les balises ….

Ensuite, nous ouvrons le fichier de style style.css, trouvons la police à modifier et écrivons-en une nouvelle. Entrez simplement le nom de la nouvelle police. Nous mettons la police Google Fonts entre guillemets, par exemple, font-family : "Aladin",Arial,Helvetica,Sans-serif.

Si vous ne comprenez rien du tout, de quoi je parle ici, alors regardez la vidéo où je parle en détail, comment connecter la police google font au site wordpress

______________________
Leçon 204. mais sans le plugin

Une excellente source de polices pour les concepteurs de sites Web. DANS 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 des polices Web Google aux 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:

En cliquant sur ce bouton, vous serez redirigé vers une 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-y 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. Ainsi, bien que cela semble pratique, ce n'est pas la meilleure façon de travailler avec une police si vous êtes préoccupé par la vitesse et les 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 diriger 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 :

le but 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, Internet Explorer n'affichera rien sur la page tant que le fichier de police lui-même n'aura pas été 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- descriptions, 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.

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 Fonts, afin 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'une des 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 . Tout ce que vous avez à faire pour commencer à utiliser les polices est de vous connecter ou d'avoir un compte Gmail (et 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 installer des polices Google sur un site WordPress - non seulement en termes de performances, mais aussi parce que les plugins ne 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 styliser davantage les polices individuelles. 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 :)