Salut,

Dans cet article je vais essayer d’être plus bref que l’article précédent, et surtout peut être réussir à t’éviter les allers et retours sur Codepen. J’ai enfin trouvé un plugin (qui fonctionne correctement…) et qui me permet d’écrire du code directement dans l’article. Ensuite libre à toi de le recopier dans ton éditeur ou dans ton profil codepen. Je vais donc parler de la propriété font-face, qui permet d’intégrer les polices de ton choix.

Font-face

Cette propriété est un peu particulière dans sa syntaxe puisqu’elle est un peu plus fournit que les propriétés abordée jusque là . En effet, cette propriété nécessite d’importer des polices, donc il va bien falloir que le navigateur sache où les trouver…

Voici donc à quoi ressemble la propriété font-face, écrite dans mon super plugin de code:

@font-face{
font-family:'MaPolicePerso';
src=url("police/mapoliceperso.svg");
}

 

Quelques remarques avant d’aller plus loin:

  • ne jamais oublier le @ devant le nom de la propriété (font-face);
  • le nom de votre police peut être écrite entre simple quote  ‘……..’,ou entre double quote « …. »;
  • attention aux formats de fichiers, il en existe plusieurs (.ttf, .eot, .oft, .svg, .woff);
  • l’url peut indiquer un chemin d’accès absolu  ou relatif.

Petite précision sur les chemins relatifs ou absolus:

  • absolu : tu entres une adresse internet du type: http://www.ceci-est-une-police.fr.
  • relatif : tu entres le chemin qui conduit aux fichiers de polices situé dans le dossier contenant tout ton site, par exemple:

police/mapoliceperso.svg.

Tu as donc deux possibilités pour intégrer de nouvelles polices dans ton site:

  • télécharger une police sur ton PC et l’intégrer dans un dossier à l’intérieur de celui qui contient ton site;
  • en récupérer une sur internet, que le navigateur ira chercher automatiquement.

Cas d’une police téléchargée

Il existe plusieurs sites où tu peux télécharger des polices, et il y a des milliers de choix. Il y a des polices gratuites, et d’autres évidemment payantes. Je vais utiliser des polices gratuites, c’est bien quand c’est gratuit…

Quand j’utilise une police téléchargée je vais les chercher sur:

Veilles toujours à chercher des polices qui proposent des packs CSS à l’intérieurs desquels tu trouveras tous les formats de fichiers nécessaires. Il faut faire attention à cela puisque tous les navigateurs ne sont pas compatibles avec tous les formats, trop simple!

« J’arrive pas à trouver les kits dans font-squirrel, c’est incompréhensible! »

Comment trouver une police exploitable?

Alors effectivement ça peut être un peu ch… au début mais ce n’est pas si compliqué.Il suffit de procéder de cette façon:

  • Dès que la page d’accueil s’affiche, scroller plus bas dans la page jusqu’à voir la partie FONT-FILTER;
  • ensuite sélectionner Webfont, un tri se fait automatiquement, attendre le rafraîchissement de la page;
  • sélectionne la police qui te convient en cliquant sur le nom de celle ci ou sur les caractères d’exemples. (NE PAS cliquer sur « download OTF ou TTF etc… ça n’est pas ce qu’on veut!!);
  • tu arrives donc sur la page de la police que tu as choisie. Maintenant regarde le bandeau violet, il y a un onglet WEBFONT KIT, cliques dessus;
  • Donc à ce stade plusieurs possibilités:
    • il n’y a qu’un seul format de disponible et je t’encourage à changer de police,
    • il y a plusieurs types de style de police et tu peux donc choisir si tu veux le style standard, en gras, en italique, etc..
  • Tu as choisi ton style de police, tu peux maintenant sélectionner les formats qui t’intéressent, donc là je te conseille de TOUS les sélectionner;
  • Une fois que tous les petits carrés sont bleus, cliques sur DOWNLOAD @FONT-FACE KIT.

Donc là on ne doit pas être mal, tu dois donc avoir un dossier comprenant plusieurs fichiers avec des icônes un peu bizarres, mais regardes surtout les formats de fichiers qui doivent être ceux ci: .ttf, .eot, .oft, .svg, .woff. Il doit aussi y avoir un fichier style.css . Ouvre ce fichier dans ton éditeur de texte(ne clique pas dessus directement, ça ne fonctionne pas), et tu devrais y trouver quelques choses que tu commences à connaitre…  Insère ensuite ce dossier dans celui de ton site et appelle le comme tu veux, mais pas d’espace ni de caractères spéciaux, ça peut poser des problèmes… Penses à noter le chemin d’accès, on va  en avoir besoin.

Maintenant que tout est rangé à sa place, retournons dans notre éditeur de code. Pour l’exemple , j’ai téléchargé une police parfaitement au pif qui s’appelle 2Dumb. Je vais copier le contenu du fichier style.css dans la feuille de style CSS de mon site. Voyons ce que ça donne:

@font-face {
    font-family: '2dumbregular';
    src: url('2Dumb-webfont.eot');
    src: url('2Dumb-webfont.eot?#iefix') format('embedded-opentype'),
         url('2Dumb-webfont.woff') format('woff'),
         url('2Dumb-webfont.ttf') format('truetype'),
         url('2Dumb-webfont.svg#2dumbregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Voici donc le contenu du fichier style que j’ai téléchargé, je n’ai rien modifié. Maintenant, regarde bien les url. Je te disais plus plus haut de noter le chemin relatif, puisque nous allons le saisir devant le nom de la police sur chaque ligne. Je te conseille fortement de noter des noms de dossiers courts et d’avoir un chemin d’accès courts également pour limiter les problèmes. Si besoin renomme les noms de dossiers, et suppriment ceux qui servent à rien le cas échéant.

Pour tester si cela marche, il te suffit de créer un petit fichier HTML (DOCTYPE), de te noter un titre h1 et un paragraphe par exemple et d’attribuer la classe font-family comme je l’explique dans l’article sur les polices que j’ai publié avant-hier.

Voilà ce que ça donne, avec mon nom de police et mon chemin d’accès relatif:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Mon Site</title>
    </head>
    <style><!-- Pour eviter d'avoir trop de page, j'integre le CSS dans le HTML entre les balises style -->
		
		@font-face {
    font-family: '2dumbregular';
    src: url('police/dumb/2Dumb-webfont.eot') format('embedded-opentype'),
         url('police/dumb/2Dumb-webfont.woff') format('woff'),
         url('police/dumb2Dumb-webfont.ttf') format('truetype'),
         url('police/dumb/2Dumb-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

		
h1, p{
    font-family:'2dumbregular', sans-serif;
}
    </style>
<body>
        
<h1>Mon titre</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, illum at ad molestias ipsa repellendus minus illo, cumque quos ratione optio similique soluta amet veritatis ipsam ipsum quia molestiae natus?</p>


</body>
</html>

Comme tu peux le remarquer, tu retrouves bien la propriété @font-face, suivit de toutes les url modifiées. Notes que le chemin d’accès est court, sans espaces ni tirets ou autres caractères spéciaux. Si besoin n’hésites pas à raccourcir le nom du fichiers de la police, qui peut être parfois un peu alambiqué… J’ai fait cette modification parce que la police que j’ai choisi a vraiment un nom bizarre…j’ai bien fait de choisir au pif…

En dessous de la propriété @font-face, tu peux voir que j’ai attribué à  mon titre h1 et à mon paragraphe p la propriété font-family, à laquelle j’ai donné 2 valeurs, j’aurais pu en mettre plus.  Il est à remarquer que la valeur de la propriété font-family est exactement celle que l’on a donné en valeur à l’intérieur de la propriété @font-face, où on retrouve une propriété font-family.

Par exemple, tu peux modifier le nom de ta police et l’appeler ‘toto’, donne lui le même nom en valeur pour désigner tes titres et ton paragraphe et tu verras que ça fonctionne très bien.

Je déconseille quand même de trop modifier les noms de polices, ça permets de mieux s’y retrouver je pense.

 

Les Googles-fonts

Pour trouver les googles fonts, c’est évidemment très simple, il te suffit de taper google font dans ton navigateur, ou te cliquer directement sur ce lien.

J’utilises quasiment tout le temps ces polices, parce que je les trouve très pratiques pour les raisons suivantes:

  • elles sont à ma connaissances toutes gratuites;
  • il y a énormément de choix;
  • tu peux les tester en ligne, directement depuis le site internet;
  • tu peux les télécharger, les relier à ta page via une balise link depuis la partie head, ou les relier en les intégrants dans ta feuille de style.
Tester des polices en ligne

Pour tester une police en ligne, c’est super simple, même ta petite soeur de 5 ans pourrais y arriver, ça va pas trop la pression?

Il suffit de survoler le nom de la police ou de l’auteur de la police pour que quelques commandes apparaissent, c’est presque magique.

A partir de là, il te suffit de faire comme un ingénieur du son, tu cliques sur les boutons et tu vois ce que ça fait. (Hier les designers, aujourd’hui les ingés sons, je sens que je vais me faire pleins de potes avec ce blog moi…)

L’onglet « Sentence » (phrase pour les francophones…), te permet d’avoir un aperçut du contexte dans lequel tu souhaites utiliser ta police. A toi donc de savoir si tu recherches une polices de titre, de paragraphe,

L’onglet « Regular« , te permets de choisir une mise en forme, si tu veux ta polices grasse (« le gras c’est la vie », non là je m’égare), en italique, en italique gras, en un peu gras mais italique quand même, etc. Je m’arrête là pour les définitions à la cons, suivant le type de police choisi, il y en a plus ou moins.

Le curseur de droite, de permet d’ajuster la tailler de ta police en temps réel. Cela te permet par exemple, de voir si la police que tu cherches pour tes paragraphes est lisible en 10px de haut, si tu choisis d’avoir une hauteur de texte à 10px bien entendu.

Enfin, « SEE SPECIMEN », ne montre pas une photo de moi, mais te permet d’avoir un aperçu général mais assez précis tout de même sur la police en question. Cette page te donne de nombreuses informations générales sur la polices, notamment dans quel pays elle est le plus utilisée. Je comprends pas bien à quoi peut servir cette info, à part bien sur de voir que Google a de la Data sur tout et n’importe quoi, mais ça c’est un autre débat…

Une fois que tu as choisi ta police, il te suffit de cliquer sur le petit + SELECT THIS FONT en rouge en haut à droite, et cette police va être ajouté à ton panier.

« HEEEIIINNN??? Je croyais que c’était gratuit??!!!« 

Mais c’est gratuit! Cliques maintenant sur le bandeau noir qui est désormais apparut en bas de page et une fenêtre apparaît et là plusieurs options s’offre à toi.

Mise en situation

Lorsque tu as sélectionné ta police, et que tu arrives sur la page de celle-ci descends plus bas dans la page jusqu’à la section « Popular Paring with », ‘LeNomDeTaPolice ». Cette section est très intéressante puisqu’elle te propose de tester ta police avec d’autre, et notamment avec celles auxquelles elle est déjà associée sur d’autre site.

Si par exemple du recherche une police de titre, l’appli te propose de voir ce que ça donne  et ajoute en dessous un paragraphe de texte dans une autre police (‘Open Sans’ par exemple). Il te suffit de cliquer sur les noms de polices proposée pour changer et voir ce que ça donne.

Si finalement tu veut tester ta police en paragraphe et non en titre, mais que dans le même temps la police proposés en paragraphe te convient en titre, tu as juste à cliquer sur les double flèche (haut et bas) pour les inverser.

Une fois que ton choix est fait, tu peux cliquer sur le bouton rouge (avec la croix blanche dedans, drapeau Suisse…), pour ajouter ces polices à ton panier.

Embed

Passons maintenant au « Panier », situé en bas de page, bandeau noir, qui apparaît dès que tu sélectionne une police.

L’onglet « EMBED » (intégrer) te propose 2 possibilités d’intégrer une polices dans ta page:

  • standard: Cette technique nécessite de copier l’intégralité du texte situé dans le premier cadre gris commençant par <link href=…..> entre les balises head de ta page html;

Puis cible les éléments HTML dont tu veux modifier la police, en recopiant le texte situé dans le deuxième cadre gris commençant par font-family:………; à l’intérieur de tes crochets situés dans ta feuille de style {   }. Je te laisse un exemple avec une police choisie au hasard. Tu peux également voir le résultat dans le projet Codepen.( Attention, Codepen me permet d’avoir le HTML et le CSS séparé, donc ne sois pas perturber par ça, c’est la même chose. De plus Codepen intègre directement de Doctype HTML).

embed-standard

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Ma page</title>
		<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">

    </head>
    <style>

		h1,p{
			font-family: 'Indie Flower', cursive;
		}

    </style>
    <body>
  
<h1>Mon titre</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, illum at ad molestias ipsa repellendus minus illo, cumque quos ratione optio similique soluta amet veritatis ipsam ipsum quia molestiae natus?</p>

    </body>
</html>
  • @import: Cette technique fonctionne un peu sur le même principe que pour la méthode standard mais ce n’est pas celle que je préfère. Elle est toutefois très pratique pour intégrer une google font dans certains thèmes Wordpress personnalisables. Cette fois il faut donc cliquer sur le @IMPORT et copier le texte situé entre les deux balises styles commençant par @import url(………..); et l’insérer en premier dans ta feuille de style. C’est une recommandation que j’ai lu dans StackOverflow. Je mets le lien des posts concerné ici, en espérant avoir bien compris. Ensuite comme d’habitude, tu vas cibler les éléments HTML avec la propriété font-family.

embed-@import

Pour voir la différence dans le projet Codepen, j’ai changé de police.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Ma page</title>


    </head>
    <style>
@import url('https://fonts.googleapis.com/css?family=Lobster');

		h1,p{
font-family: 'Lobster', cursive;
		}
    </style>
    <body>
  
<h1>Mon titre</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, illum at ad molestias ipsa repellendus minus illo, cumque quos ratione optio similique soluta amet veritatis ipsam ipsum quia molestiae natus?</p>

    </body>
</html>

 

Customize

Alors j’avouerais que je n’ai pas bien compris à quoi servait cet onglet pour la technique par lien (balise link ou @import), sachant que lorsqu’on sélectionne plusieurs styles de polices, on ne peut pas les attribuer. En effet, on ne peut pas écrire : ‘Open Sans bold 700’. Ou plutôt, on peut l’écrire, mais comme ça ne change rien… J’ai lu plusieurs échanges sur Stack Overflow (lien 1, lien 2), mais il faut que je continue les tests pour bien comprendre l’utilisation de cette fonction Customize en ligne (avec insertion d’un lien).

J’ai fait des tests dans Codepen (class Customize) mais ça ne fonctionne pas. Si tu as la réponse ça m’intéresse beaucoup!! Je laisse ces tests improductifs quand même si ça t’intéresse de plancher dessus…

Dans le cas où tu souhaites télécharger cette polices, et que tu veux plusieurs styles, sélectionnes ceux qui t’intéressent et cliques sur l’icône de téléchargement en haut à droite. Ensuite tu n’as plus qu’à les ajouter avec font-face comme vu précédemment. En revanche tu noteras que tu as moins de format de fichier. Veille donc bien à mettre des polices par défaut si tu veux que ton texte s’affiche. C’est le seul intérêt que j’ai trouvé à cette partie de la page.

Voilà pour cette nouvelle propriété CSS, j’espère encore une fois avoir été clair et que tu as compris 2-3 trucs, et que j’ai pas dit trop de bêtises…

N’hésite pas à laisser un commentaire en bas de page si quelque chose te chagrine.

Je te dis à bientôt pour de nouvelles propriétés CSS!

Guillaume