Comment intégrer Google Fonts sur votre blog ? Connexion aux polices Google

Les polices de l'API Google sont un excellent moyen de donner à votre blog un style frais et impeccable. À l'heure actuelle, il y a 501 polices dans l'ensemble, dont 35 prennent en charge le cyrillique. L'essentiel lors du choix d'une police est la lisibilité et la compatibilité avec le reste du blog.
Personnalisation
Par exemple, j'ai choisi la police "Marck Script".

1. Allez dans le catalogue et choisissez votre police. Vous pouvez trouver l'intégralité du répertoire des polices ici : google.com/webfonts

Choisissez les jeux de caractères que vous souhaitez :

latin (latin)
Latin étendu (latin-ext)
Cyrillique (cyrillique)

Sélectionnez « latin » et « cyrillique ». Je vous conseille de ne pas choisir le reste des options, car dans ce cas, la page mettra beaucoup de temps à se charger et parfois la police ne fonctionnera tout simplement pas.

3. Dans le troisième paragraphe, vous verrez le code qu'il faudra insérer dans le blog, mais après une petite modification. Par exemple, pour ma police - ce code est destiné :
Ce code doit être modifié pour son bon fonctionnement dans le blog.

3.1 Ajoutez "/" à la fin du code avant ">", et aussi si votre code a ce symbole - "&" remplacez-le par "&".

Installation

1. Connectez-vous à votre compte blogger.com.
Ensuite, allez dans Conception ---> Modifier le HTML

2.En utilisant la recherche (Ctrl + F), vous devrez trouver cette ligne dans votre modèle :

3. Après cela, ajoutez le code de police et enregistrez le modèle.
Usage

Vous pouvez utiliser la police installée n'importe où sur votre blog. Par exemple, si vous voulez que le "nom du site" ait cette police, alors vous devez :

1. Allez dans Conception ---> Modifier le code HTML

2.Utilisez la recherche (Ctrl + F) pour trouver cette ligne dans votre modèle :
en-tête h1

#en-tête h1 (
hauteur de ligne : 1,2 em ;
transformation de texte : majuscule ;
interlettrage : .1em ;
}

2.2 Si votre code "header h1" n'a pas de ligne de famille de polices, ajoutez-la :
famille de polices : Marck Script, Géorgie, empattements ;

2.2.1 Au lieu de "Marck Script" - mettez le nom de votre police. Le nom se trouve sur la page des polices, dans le quatrième paragraphe.
2.3 C'est tout. Vous pouvez également essayer d'ajouter la police à d'autres endroits de votre blog, tels que "sidebar", "post-body" ou "post h2".

Enfin, les mains tendues, comment changer la police de l'en-tête du site... Je n'aime pas les choses compliquées, donc je simplifie toujours tout autant que possible. Je vous propose un moyen simple, rapide et ne nécessitant pas de connaissance approfondie du langage html de modifier la police, la taille et la couleur du titre de votre site.

Juste trois lignes dans l'éditeur, et vous obtiendrez un réel plaisir de votre propre créativité sur le site. De plus, si vous utilisez un modèle gratuit, le site commencera à acquérir des fonctionnalités individuelles.

Précautions pour ceux qui ne sont pas sûrs

  • Tout d'abord, décidons? que nous parlons de thèmes WordPress (modèles). Si le thème de votre blog est défini sur ce moteur, cet article est pour vous.
  • Si vous n'êtes pas sûr de vos capacités, il est préférable d'expérimenter d'abord sur un sous-domaine de test. Après vous être assuré que vous êtes capable de travailler, vous pouvez transférer la compétence sur le site principal. Cependant, les actions nécessaires pour changer la police de l'en-tête du site sont si simples qu'il est difficile de tout gâcher. Personnellement, je fais toujours tout sur le test en premier. Un peu plus de temps, mais plus fiable.
  • Au cas où le site serait toujours en panne, lisez, >>. Mais, si tout est fait avec soin, aucune catastrophe ne se produira.

Une ligne de code peut sembler différente dans différents modèles. Pour clarifier le fonctionnement de votre modèle, consultez l'article . Il y a une vidéo détaillée sur la façon de trouver n'importe quelle ligne de code - après quoi vous pouvez apporter presque toutes les modifications à votre modèle de site Web. La compétence vous libérera du besoin de fouiller dans les codes et vous déliera les mains.

Si vous ne le comprenez pas vous-même et que vous voulez trouver un bon pigiste qui comprend les codes, alors dans l'article sur il y a un lien utile vers qui se tourner en cas de n'importe quoi.

Instructions pour changer la police dans l'en-tête du site

Et si vous n'avez pas le temps de le comprendre, mais que vous le voulez plus rapidement. Pour tout sur tout, nous avons besoin de notre site Web et du programme word (pour choisir une police).

  1. Nous entrons dans le panneau d'administration de notre site. De plus, dans la barre latérale gauche, nous trouvons Console - Apparence - Éditeur.
  2. Sur le côté droit, nous trouvons Liste de styles (style.css) et ouvrez-le.
  3. L'en-tête du site est l'en-tête h1. Situé plus près du début. Afin de ne pas regarder avec vos yeux, vous pouvez appuyer sur Ctrl + F - la barre de recherche apparaîtra. Tapez la recherche. Cette partie ressemble à ça pour moi :

Carré supérieur : ligne de changement de police.

Carré du bas : ligne de changement de taille de police.

Plus tard, nous modifierons la taille et la couleur de la police si nécessaire.

Comment changer la police de l'en-tête du site

  1. Maintenant, nous ouvrons un document Word vierge, copions le titre sur la page principale du site et le transférons dans un document Word, sélectionnons-le et commençons à jouer avec différentes polices. Ils sont situés sur le panneau supérieur dans le coin gauche. Pourquoi est-il pratique de le faire dans ce programme - car tous les changements dans la police de votre nom sont immédiatement visibles. Choisissez une police qui correspondra au nom de votre site. Une police que vous aimerez certainement. Une fois sélectionné, copiez le nom de la police dans Worde.
  2. Nous revenons au panneau d'administration du site. Dans la ligne de changement de police (sur la figure - le carré bleu supérieur), entrez le nom de la police sélectionnée au lieu de celle par défaut.
  3. En bas de la page, cliquez sur "Mettre à jour le fichier".
  4. Allez sur le site et voyez si la police s'intègre bien dans le contexte général. Sinon, retournez dans Word et choisissez-en un autre. Tout.

Comment changer la taille de la police de l'en-tête du site

Cela se fait dans le même modèle d'éditeur. L'image ci-dessus est le deuxième carré bleu. Tout ce que vous avez à faire est de mettre d'autres chiffres - la police deviendra plus grande ou plus petite, selon ce dont vous avez besoin. Nous sauvegardons les modifications, allons sur le site et voyons si tout nous convient.

Comment changer la couleur de la police de l'en-tête du site

Cela se fait au même endroit. Il y a une ligne dans le bloc suivant après celui où nous avons changé la police elle-même et sa taille. Cela ressemble à quelque chose comme ça :

Pour choisir une couleur, vous pouvez utiliser l'une des options de thème : Console - Apparence - Arrière-plan... Dans la ligne "Couleur d'arrière-plan", vous pouvez sélectionner une couleur, copier sa valeur alphanumérique et la coller à la place de ce qui était (dans mon cas, # 11006a). Sauvegarder les modifications. Nous allons sur le site et admirons.

De manière à changer la police, la couleur et la taille, vous devez apporter des modifications en seulement 3 lignes de l'éditeur. Avec un peu d'habileté, cela prend très peu de temps.

Beau titre bien lisible,

conforme à l'esprit général du thème,

rendra votre blog plus attrayant et mémorable.

Expérimentez, choisissez ce que vous aimez !

P.S. Lorsque j'apporte des modifications, même mineures, aux fichiers de l'éditeur de thème, juste au cas où, je copie entièrement le texte modifié dans le bloc-notes - dans le dossier où le zip du thème installé sur mon site est stocké. Dans le cas où le site tombe en panne soudainement et qu'il faut réinstaller le thème, j'ai sauvegardé tous les fichiers modifiés à mon goût. Il ne restera qu'à la réinstallation de wordpress ou d'un thème pour transférer les fichiers dans les dossiers appropriés sur l'hébergement.

Dans les prochains articles, en cours de transformation de mon blog, on changera tout aussi bien la couleur de fond, les polices de rubriques dans les rubriques, les articles, la couleur des liens - bref, tous les éléments

Irina Kudryavtseva

Justus a montré une version, je veux voir plus de polices possibles !

https://www.blogger.com/profile/03714046357448661094

Irina Kudryavtseva, malheureusement, c'est la seule police "non standard" que j'ai rencontrée (sur Blogspot). Si quelqu'un connaît d'autres polices, je serais ravi de le lire !

Si.A.A.

Et par lots, c'est-à-dire dans tous les messages en même temps, il est possible de changer la police ? Et puis avec mille messages avant la retraite, il faudra refaire les messages.

Si.A.A., besoin de penser! Donnez-lui le temps jusqu'à demain!

https://www.blogger.com/profile/13746790384341325111

Si.A.A.

Persuadé. Mais un seul jour. ;)

https://www.blogger.com/profile/06106872544132460143

Si.A.A., votre demande a été complétée! A la fin du post, j'ai posté un manuel d'installation. Une solution simple n'a pas fonctionné, vous devez « creuser plus profondément » dans le modèle ! De plus, on ne sait pas comment cela affectera la conception globale du blog ?

https://www.blogger.com/profile/13746790384341325111

MagentaWAVE

"malheureusement, c'est la seule police "non standard" que j'ai rencontrée (sur Blogspot). Si quelqu'un connaît d'autres polices, je serais ravi de le lire !"
je me permets de spammer le lien,
http://www.magentawave.com/2013/01/connect-and-use-web-fonts.html
Tout récemment, je me suis battu sur ces questions,

https://www.blogger.com/profile/05069681985675276048

MagentaWAVE, merci, je mettrai votre lien à la fin de l'article, pour les lecteurs avertis !

https://www.blogger.com/profile/13746790384341325111

Si.A.A.

Merci, mais un peu effrayant après l'avertissement "comment cela affectera la conception du blog".

https://www.blogger.com/profile/06106872544132460143

Si.A.A., Je voulais dire qu'en plus du texte, la police ira ailleurs ! Où...? Cela ne sera visible qu'après l'installation du code ! Je ne pense pas que ça va empirer. Dans tous les cas, vous pouvez tout retourner !

https://www.blogger.com/profile/13746790384341325111

Marina Kouyarova

Merci pour le conseil. Si vous remplacez la police du code par une police prise en charge par le modèle, les polices peuvent être modifiées, par exemple, dans les gadgets (ce que j'ai fait :))

https://www.blogger.com/profile/05106932572444773407

OLENA SAVITSKAYA

Pardonnez-moi, s'il vous plaît, la théière elle-même, mais où est l'éditeur de texte ? à bout portant ... et où se trouve le code HTML du modèle-où-lorsque j'ai cliqué sur-modèle-suivant-pour changer le code HTML ? mais si c'est là, je ne vois rien sur ce que tu écris, oui, eh bien, eh bien, c'est comme ça-il ne m'arrive rien .. et les feuilles tombaient, et maintenant pour le deuxième jour elles ne tombent pas .. où sont-ils allés alors ? !

https://www.blogger.com/profile/04422214255958505740

OLENA SAVITSKAYA, par exemple, j'ai tapé Google et j'ai tout de suite trouvé un article pour vous avec une vidéo :
http://mlmvsem.blogspot.de/2012/01/blogspot.html

https://www.blogger.com/profile/13746790384341325111

Christina Azarova

Où avez-vous vu de telles balises ! Si vous écrivez en groupe, écrivez cela pour les modèles standard, dans l'auto-description, il n'y a rien de tel, et cela ne fonctionnera pas.

https://www.blogger.com/profile/05518665193214781905

Christine Azarova, Les balises sont extraites de modèles standard et elles SONT là, mais les trouver dans le nouveau « Modifier HTML » est très difficile !

https://www.blogger.com/profile/13746790384341325111

Vladimir Télévnoy

Le site propose une sélection de polices Web, je ne comprends toujours pas comment l'utiliser, http://www.google.com/fonts/

Vladimir Télévnoy

Si vous souhaitez proposer. Le site contient des liens et des scripts, mais quoi et où insérer...

https://www.blogger.com/profile/16497829425382739102

Irina Busurmanova

Je veux une écriture calligraphique, mais pour une théière c'est juste de l'HORREUR !

https://www.blogger.com/profile/10826754143079211427

Comment changer la police sur mon site ? Comment connecter les polices publiques de la bibliothèque Google Fonts, et si la police est exclusive ? Si les questions vous concernent, lisez la suite

Formats de police

Comme les autres types de fichiers, les polices sont disponibles dans une variété de formats. Il en existe plusieurs dizaines au total, et TTF, EOT, WOFF et SVG sont considérés comme les plus populaires de ceux utilisés sur le réseau. De plus, chacun n'est pris en charge que par certaines versions du logiciel.

En plus d'appartenir à des systèmes spécifiques, ils diffèrent par la technologie de rendu des symboles et la méthode de compression. Le volume du fichier reçu dépend de ce dernier, ce qui affecte directement le temps de son chargement, et donc la vitesse d'affichage de la page. Ceci n'est critique que lors de l'installation d'une nouvelle police, car après le téléchargement, le fichier la contenant sera stocké dans le cache. Actuellement, lors de l'intégration d'une police spécifique sur un site, vous devez préparer tous ces formats de polices : TTF (ou OTF), WOFF, EOT et SVG.

Connexion aux polices Google

Pour faciliter le travail avec les polices, Google a créé le service Fonts, qui propose plusieurs centaines de polices, dont des dizaines de cyrilliques.

Après avoir sélectionné les polices souhaitées, et il peut y en avoir plusieurs, le service génère une fenêtre minimisée avec les modes "standard" et "import", chacun ayant deux types de code :

  • ajouter des spéciaux. une ligne à l'en-tête du document HTML entre les balises + prescrire la combinaison souhaitée dans le fichier CSS ;
  • ou écrivez une autre ligne entre les balises