commande FONT-FACE
Rôle
La commande @font-face permet d’intégrer votre propre police sous forme de fichier TTF/OTF ou WOFF ou SVG ou encore EOT. Vous devez d’abord définir un nom pour la police (par exemple maPolice), puis pointez sur le fichier de police. Evitez les majuscules pour le nom du fichier de police
Voici la syntaxe pour utiliser la commande @font-face
@font-face {
font-family: amadeus;
src: url('maPolice.ttf');
}
Testez vous-même cet attribut
Utilisez Codepen.
– Le code CSS
@font-face {
font-family: amadeus;
src: url('Amadeus.ttf');
}
div {
font-family: amadeus;
}
– Le code HTML
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam ab at voluptatibus, numquam reiciendis placeat quasi ducimus facilis quo natus alias fuga vitae debitis tenetur corporis tempore labore obcaecati nam!</div>
Résultat
Note : vous devez envoyer votre police sur votre serveur pour que cela fonctionne
Déclarer plusieurs fichiers
Pour solutionner les problèmes d’incompatibilité, il est parfois nécessaire de déclarer plusieurs fichiers pour une même fonte, on sépare pour cela les appels de chaque fonte alternatif par une virgule .
– Le code CSS
@font-face {
font-family: amadeus;
src: url('Amadeus.woff') format('woff');
url('maFonte.svg') format('svg'),
url('Amadeus.ttf') format('truetype');
}
div {
font-family: amadeus;
}
La déclaration de format n’est pas obligatoire, mais si vous l’occultez, le navigateur va télécharger la fonte pour vérifier son format ce qui peut affecter la performance d’affichage de votre contenu.
Compatibilité
La compatibilité dépend du format du fichier « font ».
TTF/OTF (développée par Apple puis racheté par Microsoft)
4.0 
3.5 
9.0 
3.1 
10.0
WOFF (Format compressé)
5.0 3.6 9.0 5.1 11.1
SVG (Format graphique libre développé et maintenu par le W3C)
4.0 
3.2 9
EOT (microsoft)
9.0 
Note : Le format WOFF et sont successeur le WOFF2, ont donc été créés spécifiquement pour un usage web. Ils embarquent des polices .ttf en les compressant. Bien que d’autres formats soient acceptés dans les navigateurs, au vu du support du WOFF, à moins que vous ne cherchiez à rendre vos sites compatibles avec d’anciens navigateurs, inutile de vous embarrasser d’autres formats.
