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

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!

 

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)

navigateur-chrome 4.0 navigateur-firefox 3.5 navigateur-ie 9.0 navigateur-safari 3.1 navigateur-opera 10.0

WOFF (Format compressé)

navigateur-chrome 5.0 navigateur-firefox 3.6 navigateur-ie 9.0 navigateur-safari 5.1 navigateur-opera 11.1

SVG (Format graphique libre développé et maintenu par le W3C)

navigateur-chrome 4.0 navigateur-firefoxnavigateur-ienavigateur-safari 3.2 navigateur-opera 9

EOT (microsoft)

navigateur-chrome navigateur-firefox navigateur-ie 9.0 navigateur-safari navigateur-opera

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.

A voir aussi

font– font-size– font-style– font-variant– font-weight