Comment utiliser les polices Web dans WordPress

Récemment, tout le monde semble parler de homard. Pas les crustacés de l'océan, mais la police Web. Pour ceux qui n'en ont pas entendu parler, le homard est un bon exemple d'une police Google populaire qui est intégrée dans les pages Web.

L'intégration des polices n'est pas aussi nouvelle que vous le pensez. En 1998, CSS 2 a introduit la règle de Font-Face. En théorie, en théorie, les concepteurs ont permis de télécharger n'importe quelle police TrueType ou PostScript à un ordinateur utilisateur pour afficher dans les pages Web. Malheureusement, à l'époque, seul Internet Explorer 4 a soutenu la règle. Il y avait une crainte généralisée que les polices qui étaient coûteuses à permis soient piratées. Aujourd'hui, CSS 3 n'aide toujours pas avec le problème du piratage, mais tous les navigateurs Web prennent en charge la règle. Les résolutions d'écran se sont considérablement améliorées depuis cette époque. Donc, si vous n'avez pas encore embrassé les polices, c'est le moment de le faire.

Les plats clés

• Embrassez l'utilisation des polices Web dans WordPress pour améliorer l'attrait visuel et assurer une typographie cohérente sur différents appareils et navigateurs.
• Utiliser les polices Google, les polices Web Adobe Edge et la bibliothèque de polices ouvertes pour accéder à une large gamme de polices gratuites et open source.
• Considérons les polices payantes provenant de sources comme la boutique de police pour une typographie de haute qualité et unique qui peut distinguer votre site Web.
• Implémentez les polices dans WordPress à l'aide de méthodes CSS telles que @Import, Link ou JavaScript, ou utilisez des plugins pour une intégration plus facile.
• Utilisez des piles de polices dans CSS pour spécifier les polices préférées et fournir des options de secours, garantissant que le texte s'affiche efficacement sur différents systèmes.
• Sauvegardez toujours votre site WordPress avant d'apporter des modifications aux thèmes ou l'ajout de nouvelles polices pour éviter de perdre des données et d'assurer des mises à jour en douceur.

Options de police Web actuelles

Avant de parler de l'utilisation de polices Web dans WordPress, prenons du recul et regardons les polices sur le Web en général.

Le niveau de prise en charge le plus élémentaire pour les polices provient du système d'exploitation que l'utilisateur utilise. Cela peut offrir des dizaines de polices pour un système de bureau ou d'ordinateur portable à seulement trois polices sur Android.

Malheureusement, cela reste un système de chance assez en pot. Nous savons tous à quel point Helvetica a mal appris sur les machines à base de fenêtres lorsqu'elles sont définies à 16px et en dessous, et cet Arial peut sembler moins que fantastique sur certaines versions anciennes d'Os X.

Beaucoup de ces écarts sont devenus parce que le système d'exploitation Apple Mac d'origine était lié à l'ancienne technologie de presse d'impression de 72 points par pouce . Les polices à 10 points ont donc été allouées à 10 pixels sur l'écran. À l'époque, Apple a offert des moniteurs verticaux (portrait) de la même taille que le papier américain standard, et une comparaison individuelle directe pourrait être faite de l'écran à une version imprimée. Microsoft, en revanche, a choisi 96 PPI sur la base des gens assisteraient à un 1/3 supplémentaire de la distance d'un moniteur d'ordinateur qu'ils ne le feraient depuis une page imprimée. Ainsi, tout a été rendu 1/3 plus grand sur un ordinateur Windows.

Les choses ont parcouru un long chemin depuis les années 1990, lorsque ces technologies ont émergé, et nous avons maintenant une myriade de tailles d'écran et de résolutions différentes à gérer. Pourtant, à moins que vous ne spécifiez une police, l'appareil et le navigateur des utilisateurs feront toujours le choix de la police pour vous.

Un autre problème est que certaines organisations limitent les polices sur les ordinateurs des utilisateurs. J'ai travaillé une fois dans une organisation dont les ordinateurs seulement ont fait installer la Géorgie et Verdana. C'était ainsi que les lettres et les e-mails envoyés par les employés ne pouvaient être envoyés qu'à l'aide d'une police qui correspondait à l'identité de l'entreprise.

Tirer le meilleur parti des polices intégrées

Ne pas résister à l'utilisation de polices d'entreprise, la plupart des ordinateurs de bureau et d'ordinateur portable - ont des polices créées pour les polices Microsoft Core pour le projet Web. Ce pack de polices de 1996 comprenait Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana et Webdings. Bien que les versions de ces polices ou de leurs équivalents puissent être invoquées comme étant sur la plupart des ordinateurs de bureau et des ordinateurs portables, le navigateur peut ne pas être invoqué pour afficher les polices comme vous vous y attendez.

De telles limitations peuvent être minimisées en utilisant une pile de police . Cela définit une règle CSS pour que le navigateur utilise l'une des plusieurs polices. Il comprend toujours une capture de Serif (ayant de petits embellissements à l'extrémité des coups) ou Sans-Serif (sans les embellissements). Ainsi, nous pouvons avoir la famille de la police: Cambria, «Hoefler Text», «Liberation Serif», Times, «Times New Roman», Serif. Le navigateur doit examiner votre «pile» et afficher le texte en utilisant la première police définie qu'il trouve dans votre liste qui est présente sur l'ordinateur des utilisateurs. S'il ne trouve aucun de ceux-ci, il utilise une police de secours définie, dans cet exemple, comme serif.

L'objectif est de choisir une gamme de polices qui rendent bien sur une gamme de navigateurs à une gamme de résolutions et de niveaux de zoom différents.

Il y a une excellente discussion sur les piles de polices par le concepteur canadien Amrinder Sandhu ici.

Malheureusement, l'utilisation d'une pile de polices n'aide pas si vos téléspectateurs utilisent des appareils portables. Les appareils Android utilisent Droid Sans, Droid Serif et Droid Sans Mono, tandis que les appareils Apple iOS utilisent Helvetica Neue qui a une large gamme de styles et de poids.

Vous aimeriez probablement avoir plus de contrôle sur l'apparence de vos pages WordPress que de s'appuyer sur les polices intégrées d'une multitude de systèmes d'exploitation et de versions. Nous pouvons surmonter cela en intégrant les polices.

Maintenant, regardons les types de polices Web disponibles.

Fonts gratuits

La grande majorité des polices disponibles sont autorisées d'une manière ou d'une autre. Lorsque vous achetez un ordinateur, une tablette ou un téléphone mobile qui a un système d'exploitation installé, une partie du coût est la licence des polices. Cependant, il existe plusieurs façons d'utiliser une large gamme de polices intégrées gratuites.

Les polices embarquées sont des jeux de caractères qui sont téléchargés sur un ordinateur des utilisateurs à partir d'une plate-forme tierce pour le moment où la page est active et perdue lorsque la page est fermée. Cela permet à la société de service de conserver le contrôle de la police, mais vous permet d'afficher la police sans la nécessité de payer pour l'utiliser. Il existe un grand nombre d'entreprises desservant des polices. Les plus connus sont:

1. Fonts Google, probablement le service de police gratuit le plus populaire, la plate-forme propose plus de 700 polices bien conçues, y compris le homard.
2. Adobe propose également des polices via leur plateforme de polices Web Edge. Cela interface directement avec le service Typekit (voir ci-dessous), mais filtre les polices payantes laissant des polices ouvertes gratuites.
3. Une autre plate-forme à considérer est la bibliothèque de polices ouvertes. Cela a plus de 600 polices.

Toutes les polices sur ces plateformes, et un certain nombre d'autres, utilisent la licence de police ouverte. Les objectifs de la licence de police ouverte (OFL) sont de stimuler le développement mondial de projets de polices collaboratifs, de soutenir les efforts de création de polices des communautés académiques et linguistiques, et de fournir un cadre libre et ouvert dans lequel les polices peuvent être partagées et améliorées en partenariat avec d'autres.

L'avantage des polices ouvertes est qu'elles sont disponibles gratuitement à utiliser sur vos sites Web sans avoir besoin de payer des frais de licence annuels. L'inconvénient est que la police choisie peut ne pas avoir une gamme complète de styles et de poids.

Fonts payés

Malgré la prévalence des polices libres, il y a encore un grand nombre de fonderies de polices offrant des polices premium. Par exemple, les archives de Foundries type répertorie près de 300 créateurs et sites offrant des polices de caractères premium, bien qu'elles ne soient pas toutes proposées pour intégrer dans les pages Web.

des organisations offrant des polices haut de gamme pour un usage Web, la boutique de polices basée en allemand est peut-être le marché le plus populaire pour les polices payantes. Il y a des polices de haute qualité, ainsi que des ensembles inhabituels de glyphes tels que l'ensemble de fruits et légumes de cuisine d'Ulrike Rausch, de fourches et de couteaux, de pots et d'appareils électroménagers, LieBeCook.

Si vous avez un compte Creative Cloud Adobe, vous avez automatiquement accès au service Typekit d'Adobe. Typekit propose plus de 450 polices. La capture est que bien que la licence vous permette d'utiliser les polices dans les publications imprimées et sur vos sites Web personnels non commerciaux, si vous travaillez pour un client, vous pouvez utiliser les polices Web que si vous avez un compte commercial Adobe. Adobe suggère de créer un compte pour le client pendant le développement et de les remettre. Cela a l'inconvénient que si le client ne paie pas son compte, le site reviendra aux polices de secours dans votre pile de polices définie, c'est-à-dire les polices système

Obtenir la police que vous souhaitez dans vos pages WordPress et vos messages

Il existe un certain nombre de plugins qui vous permettent d'utiliser des polices Web sur votre site Web WordPress, les polices Google faciles étant l'une des plus populaires. Je ne vais pas me concentrer sur les plugins dans cet article, mais plutôt voir comment le faire manuellement, en apportant des modifications à notre thème. De plus, certains thèmes sur le marché sont livrés avec diverses options de police Web.

Le code réel variera d'un service à l'autre. Je vais décrire les méthodes de polices Google et Adobe Edge / Typekit. D'autres services fonctionnent de manière similaire. Tout d'abord, n'oubliez pas de sauvegarder votre site (ou de travailler idéalement sur une copie de développement distincte) et de travailler sur des copies des fichiers au cas où quelque chose se passe mal. Les modifications de style doivent être apportées à l'aide de thèmes pour enfants afin que vos modifications ne soient pas écrasées à chaque fois que le thème est mis à jour.

Google Fonts

Il existe trois méthodes (à part les plugins) pour afficher des polices externes sur vos pages WordPress et vos messages avec Google Fonts: @Import, Link et JavaScript.

Une fois que vous avez sélectionné votre police, cliquez sur le bouton Utilisation rapide. Si vous êtes offert, vérifiez les poids et styles requis, et le (s) jeu (s).

Ensuite, vous devrez choisir la méthode d'incorporation. La méthode la plus simple consiste à ajouter la règle @Import au fichier style.css du thème que vous souhaitez modifier. Cela ne semble pas avoir d'importance où vous placez le code dans les règles de style.css. Cependant, @Impport bloquera tout autre contenu de téléchargement jusqu'à ce qu'il ait terminé sa tâche. Par conséquent, si vous prévoyez d'utiliser cette méthode pour plusieurs polices, vous devez combiner les demandes en une seule règle @Import.

La deuxième méthode est tout aussi simple, elle utilise la méthode de liaison et le code est contenu dans l'onglet standard. Cette fois, le code est placé dans le fichier en tête.php. Placez le code en haut du fichier. Vous pouvez ensuite ajouter le nom de la police à votre pile de polices. N'oubliez pas de l'ajouter comme la première police, suivie des polices de système préférées et du style de police de secours.

Ici, il convient de noter que le blog Google Web Fonts stipule que si une balise de script est présente avant la déclaration de Font-Face, alors Internet Explorer n'affiche aucun contenu de page tant que les fichiers de police n'auront pas terminé le téléchargement. Par conséquent, si les fichiers ne parviennent pas à télécharger, l'utilisateur Internet Explorer est peut-être laissé avec une page vierge ou partiellement chargée. Placez donc la déclaration de Font-Face le plus tôt possible dans le fichier.

Une autre méthode consiste à enqeue la police dans le fichier functions.php. La fonction illustrée ci-dessous chargera les styles et poids de police requis.

Enfin, vous pouvez charger la police en utilisant JavaScript. Il y a des arguments pour et contre l'utilisation de JavaScript, mais le nombre d'utilisateurs avec JavaScript désactivé est très faible. Le code est ajouté dans l'en-tête.php du thème de l'enfant, où il est placé entre les balises et . Encore une fois, Google suggère que ce devrait être le premier élément, de cette façon, les polices se chargeront tandis que les autres parties de la page se chargent et cela devrait éviter le «flash du texte non style».

Adobe Edge Web Fonts and Typekit

Ajouter des polices Adobe Typekit à WordPress est un peu moins simple. Bien que vous puissiez utiliser des méthodes similaires à celles pour les polices Google, les développeurs moins expérimentés peuvent utiliser les polices TypeKit pour le plugin WordPress. Une fois installé, le plugin apparaîtra dans votre menu Paramètres. Encore une fois, n'oubliez pas de sauvegarder WordPress avant d'apporter ces modifications.

Pour utiliser Typekit, connectez-vous à votre compte via l'application Creative Cloud. Une fois que vous avez sélectionné une police, créez un kit. Donnez un nom à votre kit, puis ajoutez le nom de domaine du site sur lequel vous utilisez la police. Une fois que vous avez entré les détails de votre site, vous recevrez un morceau de JavaScript. Copiez et enregistrez-le dans un fichier texte à l'aide d'un éditeur de texte brut tel que Textedit ou Notepad.

L'étape suivante consiste à sélectionner votre police, à l'ajouter à votre kit de site et à le publier. Ajoutez toutes les autres polices que vous souhaitez utiliser et les publier.

Une fois le kit publié, accédez aux polices Typekit pour le plugin WordPress.

Ajoutez le morceau de code que vous avez enregistré dans le fichier texte.

Ajoutez les sélecteurs de code CSS selon les besoins. Dans l'exemple, j'ai ajouté la post-titre à afficher en tant que texte H1 (la page WordPress et les titres de publication sont du texte H1.). J'ai également ajouté un sous-titre qui est la sous-position H2 dans le texte du corps principal. Notez qu'avant de nommer vos sélecteurs, c'est une bonne idée de vérifier que les noms ne sont pas déjà utilisés par votre thème. Vous pouvez le faire en inspectant les éléments à l'aide des outils de développeur de votre navigateur. N'oubliez pas de rafraîchir votre écran après chaque modification que vous effectuez, il peut prendre quelques minutes pour que la police soit disponible sur votre site.

Enfin, il est également recommandé de spécifier toujours à la fois les propriétés de poids de police et de style police chaque fois que vous utilisez une police. Encore une fois, cela vous aide à maintenir le contrôle de l'affichage de la police sur la myriade de plates-formes possibles.

Conclusion

Ajouter des polices à votre site est une méthode acceptée pour produire des sites attrayants. Cela peut également être un excellent moyen de faire ressortir un thème WordPress couramment utilisé de tous les autres.

Cependant, ne soyez pas tenté d'ajouter un grand nombre de polices simplement parce que vous pouvez - l'une de mes premières tâches en communications visuelles au lycée était de compter le nombre de polices sur les paquets de céréales (il y avait plus de 25 polices sur Un paquet de flocons de maïs!). Moins est souvent plus avec les polices, et se limiter à deux ou trois conceptions est généralement la meilleure pratique, non seulement du point de vue de la vitesse de chargement, mais aussi un point de vue de conception visuelle.

Google propose une fonctionnalité de polices dans le bouton SUPOT, le bouton est à côté du bouton Utilisation rapide pour vous aider à démarrer. La conception graphique est un métier qui prend des années à maîtriser, mais l'intégration de quelques bonnes polices garantira que la conception que vous choisissez sera vue par tous vos utilisateurs.

Des questions fréquemment posées sur l'utilisation des polices Web dans WordPress

Comment puis-je ajouter des polices Google à mon site WordPress?

Ajouter des polices Google à votre site WordPress est un processus simple. Tout d'abord, vous devez visiter le site Web de Google Fonts et choisir la police que vous souhaitez utiliser. Cliquez sur le bouton «Sélectionnez cette police» et copiez le lien fourni. Ensuite, accédez à votre tableau de bord WordPress, accédez à Apparence> Éditeur de thème et trouvez le fichier en tête.php. Collez le lien copié dans les étiquettes de tête. Enfin, vous pouvez utiliser la police dans votre CSS en faisant référence à la famille de police.

Puis-je utiliser des polices personnalisées dans WordPress?

Oui, vous pouvez utiliser des polices personnalisées dans WordPress. Vous pouvez le faire en téléchargeant les fichiers de police (généralement .TTF ou .otf) à votre répertoire de thème WordPress, puis en utilisant CSS pour appliquer la police à votre site Web. N'oubliez pas de vérifier la licence de la police avant de l'utiliser.

Comment puis-je modifier la taille de la police dans WordPress?

Vous pouvez modifier la taille de la police dans WordPress en utilisant CSS. Accédez à Apparence> Personnaliser> CSS supplémentaire dans votre tableau de bord WordPress et ajouter une règle CSS pour modifier la taille de la police. Par exemple, pour modifier la taille de la police de tous les paragraphes en 16px, vous pouvez utiliser le CSS suivant: P {Font-Size: 16px; }.

Que sont les polices en matière de toile? . Des exemples de polices sur le Web incluent Arial, Times New Roman et Courier New.

Comment puis-je utiliser une police en service Web dans WordPress?

Pour utiliser une police en matière de femmes dans WordPress? , vous pouvez simplement référencer la police dans votre CSS. Par exemple, pour utiliser la police Arial pour tous les paragraphes, vous pouvez utiliser les CSS suivants: P {Font-Family: Arial; }.

Quelle est la différence entre les polices Serif et SANS-Serif?

Les polices Serif ont de petites lignes ou des traits attachés aux extrémités des traits plus grands dans une lettre ou un symbole. Les exemples incluent Times New Roman et la Géorgie. Les polices sans-serif, en revanche, n'ont pas ces petites lignes. Les exemples incluent Arial et Helvetica.

Comment puis-je utiliser une police Serif dans WordPress?

Pour utiliser une police Serif dans WordPress, vous pouvez référencer la police dans votre CSS. Par exemple, pour utiliser la police de Géorgie pour tous les titres, vous pouvez utiliser le CSS: H1, H2, H3, H4, H5, H6 {Font-Family: Géorgie; }.

Puis-je utiliser différentes polices pour différentes parties de mon site WordPress?

Oui, vous pouvez utiliser différentes polices pour différentes parties de votre site WordPress. Vous pouvez le faire en utilisant CSS pour appliquer différentes polices à différents éléments HTML. Par exemple, vous pouvez utiliser une police pour les en-têtes et une autre police pour le texte du corps.

Comment puis-je prévisualiser une police dans WordPress avant de l'appliquer sur mon site?

Vous pouvez prévisualiser une police dans WordPress en utilisant un plugin comme des polices Google Easy. Ce plugin vous permet de prévisualiser les polices dans le personnalisateur WordPress avant de les appliquer sur votre site.

Puis-je utiliser une police qui n'est pas disponible sur les polices Google ou dans les polices standard de Web?

Oui, vous pouvez utiliser une police qui n'est pas disponible sur les polices Google ou dans les polices standard en matière de Web. Vous pouvez le faire en téléchargeant les fichiers de police dans votre répertoire de thème WordPress, puis en utilisant CSS pour appliquer la police à votre site Web. N'oubliez pas de vérifier la licence de la police avant de l'utiliser.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!