Comment embarquer des polices exotiques dans vos webdesigns
Quand vous découpez un nouveau webdesign pour le coder en HTML / CSS, vous avez toujours une étape inévitable ou vous vous demandez si tel ou tel texte devra être codé en simple texte ou en image ! On utilise souvent des images lorsque la police de caractère utilisée est « exotique ». Le problème c’est qu’au vu de la liste très mince de polices compatibles, pratiquement toutes les polices étaient exotiques.
Mais soyez rassuré car tout cela est du passé, car grâce à @font-face vous allez maintenant pouvoir embarquer n’importe quelle police de caractère dans vos webdesigns. Rectification en fait font-face existe depuis des années mais ce qui a changé c’est que tous les navigateurs l’interprète aujourd’hui plus au moins correctement (en tout cas suffisamment bien pour être utilisé dans un projet digital).
Je vais donc vous expliquer aujourd’hui comment embarquer une police de caractère dite exotique dans une page web.
ETAPE 1 Isoler le fichier de la font
Si vous êtes sur windows vous allez devoir trouver le fichier .ttf correspondant à votre police de caractère. Si vous ne l’avez plus je vous invite à le retrouver dans le dossier c:/windows/fonts.
ETAPE 2 Utiliser cet webapp pour générer les versions différentes
Comme je vous le disais les navigateurs interprètes plus ou moins bien les polices exotiques, ainsi chaque navigateurs ou presque demande un fichier différent (svg, eot, woff …).
Rendez-vous donc sur cette page : WebFontGenerator
Puis appuyez sur le bouton add fonts afin de choisir sur votre ordinateur le fichier de la font. Patienter quelques secondes afin que le fichier soit correctement généré puis cliquer sur le bouton download.
Attention : Vous devez être propriétaire des droits sur la police même pour une utilisation web. Ainsi si vous avez télécharger la font sur internet vous devez toujours vérifier la licence des fichiers avant toute utilisation.
ETAPE 3 Copier / coller les fichiers dans votre projet
Dans l’archive identifier les fichiers woff, woff2, svg, ttf et eot. Copier ce fichiers dans un nouveau dossier que vous pouvez appeler fonts (placer ce dossier dans votre projet).
Dans l’image ci-dessous voici un capture de mon dossier fonts, j’ai ici trois polices de caractères différentes (oui ça fait beaucoup de fichier).
ETAPE 4 Ajouter le CSS qui va bien
Pour pouvoir maintenant utiliser votre nouvelle police de caractère dans votre projet web vous devez simplement ajouter l’apport CSS qui va bien. Celui-ci permet de charger en même temps que vos styles les fichiers fonts.
Dans l’archive que vous venez de télécharger identifier le fichier stylesheet.css, ouvrer ce fichier. Vous devrez retrouver ces lignes.
@font-face {
font-family: ‘loveloblack’;
src: url(‘lovelo_black-webfont.eot’);
src: url(‘lovelo_black-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘lovelo_black-webfont.woff2’) format(‘woff2’),
url(‘lovelo_black-webfont.woff’) format(‘woff’),
url(‘lovelo_black-webfont.ttf’) format(‘truetype’),
url(‘lovelo_black-webfont.svg#loveloblack’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
Copier-coller les dans votre propre feuille de styles. De préférence au début. N’oublier pas de changer l’url de chaque source (si vous l’avez placé dans un dossier fonts comme je l’ai écrit dans l’étape précédente).
ETAPE 5 Utiliser la police pour l’appliquer sur vos textes
Pour appliquer sur vos textes cette nouvelle police c’est très simple vous devez utiliser comment avant la propriété font-family avec la valeur que vous aurez définis dans la déclaration de la police (voir ci-dessus).
Donc pour appliquer la police loveloblack sur tous les H1 de mon site je dois écrire :
h1 { font-family: loveloblack; }
Et le tour est joué. Vous pouvez bien sur ajouter tous les styles CSS dont vous aurez besoin pour modifier la taille, la couleur, les marges etc.
A bientôt sur wks.
Si vous avez aimé cet astuce n’hésitez pas à la partager avec vos amis, je suis sûr qu’ils aimeront aussi !
