Télécharger des Polices web à fin d'études

J'en vois qui rigolent au fond à cause du “à fin d'études” (rdv en bas de page et on se marave ¹ si vous avez toujours pas compris).

On le sait tous (enfin j'espère), dès qu'un fichier est en ligne, il est accessible par toute personne un peu déterminée.

Il est difficile (et ma foi, un peu vain) de protéger une ressource dans une page web.

La première chose à laquelle on pense, quand on met en ligne ses premières images, ce que fait Tonton André avec les jolies photos prises pendant la Kermesse de l'école, en s'empressant de les signer dans un cartouche en bas de chaque photo pour qu'on lui vole pas…ou mieux il écrit en travers de l'image que c'est la sienne… Mouais! Tonton ne connait pas l'option “Croper” de notre éditeur d'image, ni la fonction “Remplir en tenant compte du contexte”, ni “c'est pas grave j'en trouverai une autre moins ch... à retoucher”, l'internet est sans fond, comme la bêtise.

Bref quand c'est en ligne, ça n'est plus tout à fait à nous, c'est un peu à tout le monde (enfin presque, le droit de paternité ²… Mais ça n'est pas le sujet).

Les Formats de polices Web

On trouve dans les font-face des outils de conversion de typo (de font-squirrel, p. ex.), les typos aux formats EOT, TTF, WOFF, SVG, WOFF2. Je vous refais un point rapide et assez partial sur les formats de typo en web, qui sont :

• .EOT ou EmbedOpenType : Format de police destiné au web et mis au point par Microsoft. Basé sur l’OpenType, il allège la police pour le web. Ce format n’est pris en charge que par Internet Explorer. ³ (Arf! Internet Explorer)
• .TTF ou TrueTypeFont : Format de police le plus répandu, développée par Apple puis racheté par Microsoft. Format non compressé.
• .OTF ou OpenTypeFont : Évolution de .ttf. développé par Adobe et Microsoft. Permet la gestion de DRM. Format non compressé.
• .SVG ou ScalableVectorGraphic : Format graphique libre développé et maintenu par le W3C. Format non compressé (sauf svgz mais peu supporté), pas de Hinting ⁴ (adaptation de la forme en fonction de la taille)
• WOFF ou WebOpenFontFormat : est un format purement web. Il a été développé en 2009, notamment par Mozilla et fait l’objet aujourd’hui d’une recommandation W3C. WOFF est essentiellement basée sur de l’OTF et du TTF mais en mode compressé avec des méta supplémentaires, ce qui permet un affichage plus rapide que d’autres formats, même quand la bande passante est restreinte.
• WOFF2 : est une évolution de WOFF, avec encore une meilleure compression que l’original, un gain d’environ 30%.

En clair on en retiendra : le .WOFF et .WOFF2. On oubliera les autres qui n'ont plus d'intérêt sauf à rester compatible avec de vieux iPhone… ou à Internet Explorer ³ (Arf! Deuxième) mais qui s'en soucie?

Le woff2 est plus récent et donc moins bien reconnu par les vieux navigateurs en gros les OS “pré-2014” (p. ex. au lycée sur les Macs (av. renouvellement), la version de Safari ne reconnaissait pas le woff2).

⁵

⁶

Un outil

Je vous avais déjà parlé d'un outil présent sur les navigateurs qui permet à tout designer web d'ajuster en direct la css de sa page, ou de déboguer son petit script copier-coller qui marche pas, ou encore de récupérer les images d'insta qui nous plaisent bien…

Bref cet outil, alias “Outils de développement”est accessible via le raccourci clavier : Option + Command + i sur Firefox et Chrome (Tiens c'est le même raccourci!)

Sous Firefox uniquement

Cet outil possède un merveilleux onglet “Police” dans l'onglet “Inspecteur” dans lequel on découvre la typo utilisée dans l'élément sélectionné et inspecté.

• Quand on déplie le petit triangle “Toutes les polices sur la page”, on accède à la liste complète des polices de la page, les réglages font-face de la css (dépliable et copiable) et l'url du fichier.
• Les petits cercles rouges sur la deuxième image, vous montrent les boutons pour copier l'url de la police.
• Vous ouvrez un nouvel onglet de votre navigateur fétiche et vous coller puis Retour.
• Et Bingo ça télécharge la typo dans le format préféré de votre navigateur! (cf image 2)
• Et même parfois si vous changez l'extension du fichier (avec le clavier), vous pouvez récupérer la typo dans un autre format. (Dans le site exemple, on récupère la police en .woff2et en .woff).

Attention :

• Le fait de télécharger une police de caractère web, ne vous en rend pas propriétaire! Vous récupérez un fichier pour tester dans votre mise en page. Lorsque vous mettez en ligne votre travail, vous vous acquittez de la licence d'utilisation…
• Tout travail mérite salaire, donc on rémunère les gens qui nous font gagner de l'argent. Sinon pour quelle raison, on vous paierait vous plutôt que le typographe ou le photographe… Bref on est un oiseau intelligent et on ne scie pas la branche sur laquelle on est assis.
• Vous pouvez aussi gentiment demander avec un “s'il vous plait” à vos typographes préférés et profiter de votre statut d'étudiant pour demander la police que vous aimez tant (et vous promettez avec votre sang de ne pas la distribuer à votre Posse).
• L'astuce ne fonctionne pas sur tous les sites. Certains fondeurs ou sites hébergent leurs polices sur des serveurs qui génèrent à la volée des noms de fichiers pour les polices. D'autres, limitent le jeu de caractères de la police… Bref il y a des chicaneurs. Par ex. le site que j'ai mis en démonstration, ne propose pas toutes les Polices, certaines ont une url qui limite le set de caractères accessibles, elle est d'un format différent (ben, on s'embête pas, on laisse!).