Logo Le ReacteurLogo Le Reacteur
RecruteursÉvénementsBlogPostuler

Tutoriel

Astuce de dev : Récupérer facilement une police de caractères payante.

25 juillet, 2019

--- Xavier Colombel

Pendant le coding bootcamp, nous travaillons sur de vraies répliques de sites Internet ou d’applications Mobile. Parfois, il est nécessaire de récupérer des polices de caractères qui ne sont pas libres de droits… et donc payantes. Pour se les approprier et les utiliser, il existe une technique très simple. Ready ?

Je précise qu’utiliser des polices de caractère pour lesquelles vous ne vous êtes pas acquitté des droits d’utilisation de la licence est assimilé à du piratage et vous expose donc à des poursuites judiciaires. Je considère donc que ce que je vous montre ici est réservé à un cadre privé, pour faire l’objet de tests, sur votre ordinateur uniquement.

La force du Ninja dans le navigateur

Tout d’abord, je vous invite à installer une petite extension pour votre navigateur. Elle vous permettra de savoir si une police de caractère d’un site est payante ou gratuite. Téléchargez Font Ninja pour Chrome ou Firefox.

Pour l’utiliser, il suffit de cliquer sur l’extension dans la barre du navigateur et de passer votre souris sur la police dont vous souhaitez connaître le nom et la licence (gratuite ou payante). Dans notre exemple, nous irons sur le site de Gucci pour récupérer toutes les polices de caractères.

Gucci

On peut remarquer que les polices utilisées sont détectées comme étant payantes et l’extension nous le fait remarquer en affichant un petit Buy à côté du nom de chaque police.

Nous souhaitons donc récupérer toutes les polices utilisées sur la page.

Sans arme, ni haine, ni violence

Il faut savoir que tout ce qui s’affiche côté frontend est forcément stocké sur votre ordinateur, à un moment ou à un autre. Pour en avoir le cœur net, sur Chrome, affichez votre console en faisant un clic droit sur la page, puis cliquez sur inspecter et enfin cliquez sur l’onglet Network. Vous pouvez également afficher la console avec le raccourci clavier Alt + Cmd + I (sur Mac).

Gucci

Afin de capturer les polices, cliquez sur le filtre Font, puis rechargez votre page, comme c’est indiqué (Cmd + R sur Mac).

Vous verrez alors les polices utilisées apparaître dans la liste. Double-cliquez sur les quatre premières pour les télécharger (la dernière étant un fichier contenant des icônes, nous n’en auront pas besoin dans cet exemple).

Gucci

Une compatiblité à la papa

On remarquera, dans l’exemple, que l’on a récupéré des polices dont l’extension est au format woff. Il s’agit d’un format dédié aux navigateurs relativement récents (ici Chrome v75). Si l’on souhaite que nos visiteurs puissent visualiser une police, peu importe le navigateur (oui, même Internet Explorer), il va falloir générer d’autres polices en supplément, voire des formats encore plus performants comme le woff2.

Rendez-vous sur le site Transfonter et effectuez ceci :

  • Cliquez sur Add fonts puis sélectionnez les 4 polices précédemment récupérées.
  • Assurez-vous d’avoir coché TTF, WOFF, SVG, EOT et WOFF2.
  • Cliquez sur Convert puis, une fois la conversion effectuée, cliquez sur Download

Transfonter

Les fruits du succès

Ouvrez l’archive ainsi récupérée et regardons ce que nous avons, en plus des polices générées :

  • Un fichier demo.html qui nous permet de visualiser le rendu de chaque police, ainsi que la règle CSS associée.
  • Un fichier stylesheet.css qui contient tous les imports de polices, correctement effectués, avec la gestion des priorités pour les navigateurs.

Finder

Et voilà ! Vous pouvez créer vos répliques de sites Web (sur votre ordinateur uniquement, ok ?), sans avoir à acheter les polices !

DISCLAIMER : Attention, respectez la propriété intellectuelle et, en production, n’utilisez pas de contenus pour lesquels vous ne possédez pas les droits d’utilisation.

Apprenez à coder auprès de vrais développeurs

Depuis 2016, nous avons formés de nombreux débutants en programmation. Si vous aussi vous souhaitez apprendre à coder en étant encadré·e toute la journée par de vrais développeurs, rejoignez Le Reacteur. Nous proposons 2 formats intensifs, à temps plein ou à temps partiel, en présentiel ou à distance.

Xavier Colombel

Partager l'article

Apprendre à coder

Pourquoi vous devez apprendre le JavaScript ?

23 mai 2020

Xavier Colombel

Apprendre à coder

Pourquoi vous devez apprendre le JavaScript ?

23 mai 2020

Xavier Colombel

Ce langage de programmation est principalement employé dans la conception de pages Web et d’applications Mobile. Dans cet article, je vais vous parler de Javascript et ses principales fonctionnalités.

Le Reacteur

88 rue du Faubourg du Temple

75011 - Paris, France

oi.ruetcaerel@tcatnoc

+33 (0)1.79.738.728

Déclaration d'activité n° 11755531275

Référencement DataDock n° 0029509

Bootcamp

Developpeur Web et Mobile - Temps PleinDeveloppeur Web et Mobile - Temps Partiel
Logo Ville de ParisLogo Île de FranceLogo SyntecLogo DatadockLogo Défi Métiers

2020 © Le Reacteur Tous droits réservés - Made with React