Annonce Installer une police d'écriture sur son blog :)

Bonjour,

Aujourd'hui, j'aimerais vous partager une astuce, que j'ai découverte depuis peu. Ceci va ravir nos chers blogueurs à l'avenir ! Passons aux choses sérieuses...

Ici, je vais vous montrer comment faire pour installer une nouvelle police d'écriture sur votre blog.. Beaucoup se posaient même la question, et moi-même d'ailleurs. Mais j'ai trouvé une technique pour le faire. Vous devez simplement avoir un minimum de connaissances du CSS, une maîtrise de l'ordinateur et de légère patience pour en venir à bout.

1) Trouvez et téléchargez (si besoin) une nouvelle police d'écriture de votre choix sur Dafont et faites extraire le fichier compressé (affichez l'emplacement des dossiers une fois cela fait).

2) Rendez-vous sur votre blog (celui de votre choix, le blog à multiples tests ou le blog de démo sera mieux) et faites un nouvel article.

 - Dans votre article, repérez l'icône Document, cliquez dessus

 - Faites "Envoyer un fichier", et c'est là que vous devez chercher de fond en comble votre fichier de police. Et choisissez le bon car, souvent il y a plusieurs fichiers, donc prenez celui avec lequel vous avez installé la police sur votre ordinateur !

 - Une fois un fichier choisi, on vous demandera une option de téléchargement, il est mieux de choisir l'ouverture du fichier en tant que Lien de téléchargement, et laissez le titre du fichier tel qu'il est.

 - Une fois cela fait, enregistrez votre article, dans une rubrique confinée de préférence.

3) Devant votre nouvel article, cliquez droit sur le lien de téléchargement, puis copiez l'adresse du lien. Ou cliquer sur le lien, puis copiez l'adresse du fichier dans la barre d'adresse.

4) Aller dans "Apparence" --> Modifier le thème --> Ajouter du CSS (sur la barre Eklablog)

5) Ne croyez pas qu'il existe un code pour ça ! Mais en fait si.. Copiez le code ci-dessous et modifiez ce qui est en rouge :

@font-face {font-family: "le nom de la police";
     src: url('ADRESSE DU FICHIER');}

Ne pas effacer les guillemets, et les apostrophes, c'est important !

Pour le nom de la police, renommez la police avec son nom d'origine, et s'il y a plusieurs mots, séparez les par des _ 

L'inconvénient, c'est que pour modifier le style, l'alignement, la couleur, la taille et la hauteur de ligne, il faut tout faire par CSS ! Donc, pour les non-expérimentés, ce ne sera pas si facile, et pas ma de travail s'impose.

Pour mettre la police, par exemple en contenu :

 .module_contenu { 
 font-family : NOM DE LA POLICE ;
 line-height : HAUTEUR DE LIGNE (en %);
 font-size: TAILLE DU TEXTE (en px);
 color : COULEUR;
 letter-spacing : ESPACEMENT DES LETTRES (en px);
 }

Il existe encore plus de propriétés de texte, vous pouvez ajouter les ombres (text-shadow), le style (font-style) ou la "graisse" (font-weight), mais c'est à vous de décider ce que vous voulez ajouter pour définir le style de votre blog. Je vous avais donc bien dit de maitriser le CSS !

Vous pouvez ajouter une police d'écriture pour : .module_titre_contenu (titre article) ; .article_info (tout est dit) ; .module_menu_contenu (module des menus) ; #footer a (texte du pied de page) ; etc..

Le plus gros avantage cette fois, c'est que la police d'écriture que vous avez choisie s'affichera sur tout les écrans (même sur la tablette !). Et qu'il n'est pas nécessaire de trouver un autre moyen pour faire afficher d'autres polices sur votre blog. Vous pouvez en être fiers ;))

Fin du tutoriel, j'espère que cela marchera bien et que cela vous aura été utile à l'avenir ! Si vous avec des questions UNIQUEMENT à propos de mon tutoriel, n'hésitez pas. Avec moi, ce tutoriel marche à la perfection, mais se révèle moins utile à l'utilisation étant donné que Eklablog n'a pas la police de votre choix.

En gros, pour le CSS, il existe des tas de blogs expliquant le nécessaire, donc ce serait mieux d'aller chercher ici et là-bas plutôt que de poser des questions partout ailleurs.

- Liyu

Hello !!

moi j'ai trouvé ça aujourd'hui, que je trouves plus simple (après je sais pas si google font posède tout les fonts...) 

vous choisissez votre ou vos fonts  les ajouter a votre collection 

puis en bas faire use 

ils vous donne 3 moyen de le diffuser sur votre blog HTML Import ou java

vous installez le code dans un encart HTML

ex :

<*link href='https://fonts.googleapis.com/css?family=Coming+Soon|Crafty+Girls' rel='stylesheet' type='text/css'*>

ou

@import url(https://fonts.googleapis.com/css?family=Coming+Soon|Crafty+Girls);

ou

<*script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Coming+Soon::latin', 'Crafty+Girls::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script*>

Attention trop de font ralenti les blog !  

puis dans votre CSS

font-family: 'Crafty Girls', cursive;

ou

font-family: 'Coming Soon', cursive;

Si vous voulez utiliser ces codes  pensez à enlevez les * (début et fin) je sais pas comme ça va réagir ici donc c'est voulu pour casser la suite...

Je up ce tuto, j'ai eu du mal à en trouver un et qui fonctionne :')