#Barcamp : Intégrer une typographie web

Le but de cette veille était de déterminer les différentes possibilités afin d’insérer des typographies lors de l’intégration de sites internet.

Première possibilité

Google propose un service open source afin d’insérer facilement une typographie parmi plusieurs centaines mises à disposition.

Son avantage, un choix important de polices et une facilité de mise en place.

Malheureusement, il n’est pas possible d’avoir la main sur le code généré. Le jour où la police n’est plus disponible sur Google Fonts, il est très difficile de connaître les conséquences sur le site qui les utilise.

C’est pour cela, que nous avons choisi la deuxième solution.

Deuxième technique

Pour insérer une typographie sur un site, il est nécessaire de disposer de différents formats de fichiers afin de rendre la police compatible pour les différents navigateurs.

  • un fichier au format .eot
  • un fichier au format .woff (ou .woff2 plus récent)
  • un fichier au format .svg
  • un fichier au format .ttf (le plus standard)

Avant de choisir une typographie, il faut penser à plusieurs points :

  • regarder la licence : est-ce que je peux utiliser cette typo pour le web pour un site à but commercial ?
  • est-ce que tous les caractères sont supportés par la typo : accents, caractères spéciaux, majuscules ?
  • il ne faut pas trop d’écart de taille entre la typo choisie et la typo de substitution (Arial par ex.) : si jamais votre typo n’est pas prise en compte, il ne faut pas que l’Arial soit affichée en 60px.
  • regarder le poids des fichiers : max. 500k pour un chargement rapide

Après cette checklist, on va générer un « kit de notre typo web » via le site www.fontsquirrel.com : https://www.fontsquirrel.com/tools/webfont-generator.

Pour uploader une police, prenez un fichier ttf qui ne se situe pas dans votre dossier « Fonts » de votre ordinateur mais plutôt sur un autre dossier.

Ce kit va contenir les formats de fichiers typographiques nécessaires ainsi qu’un fichier css avec la syntaxe à utiliser.

Voici un exemple avec ma_typo_web :

La propriété « local » permet d’aller chercher la typo en local sur l’ordinateur de l’internaute. Si la police est trouvée, le chargement est plus rapide.

Ensuite, il suffit juste d’appeler la police ma_typo_web lors de la déclaration des propriétés :

2 réponses sur “#Barcamp : Intégrer une typographie web”

  1. Salut salut,

    Quelques petites précisions supplémentaires :
    — Le woff2 est à privilégier sur le woff, et il tends à le remplacer à terme. Il devrait donc se trouver dans votre liste de préconisation.
    — Par la même, on devrait toujours proposer la version locale d’une typo dans la déclaration @font-face. Si la police est déjà présente sur la bécane du client, c’est ça de gagné au temps de chargement.

    Je me permet de glisser un lien (personnel) de complément, pour la gestion des différentes versions d’une typo ; on y trouve en plus l’exemple d’utilisation de la directive « local() » : https://www.emmanuelbeziat.com/blog/utiliser-les-proprietes-de-police-avec-une-font-web/

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.