Attribut font-face CSS

La commande @font-face en CSS est un outil essentiel pour intégrer des polices personnalisées dans vos projets web. Elle permet l’utilisation de divers formats de fichiers de polices, comme TTF/OTF, WOFF, SVG et EOT, offrant ainsi une grande flexibilité dans le design typographique.

Comment Utiliser @font-face

Pour utiliser @font-face, commencez par définir un nom pour la police, puis spécifiez le chemin d’accès au fichier de police. Il est recommandé d’éviter les majuscules dans le nom du fichier de police pour garantir une meilleure compatibilité.


            @font-face {
                font-family: amadeus;
                src: url('maPolice.ttf');
            }
        

Tester avec Codepen

Vous pouvez tester la mise en œuvre de @font-face en utilisant des outils en ligne comme Codepen. Voici un exemple simple de code CSS et HTML utilisant @font-face :


            /* CSS */
            @font-face {
                font-family: amadeus;
                src: url('Amadeus.ttf');
            }
            div {
                font-family: amadeus;
            }
            /* HTML */
            <div>lle permet l'utilisation de divers formats de fichiers de polices, comme TTF/OTF, WOFF, SVG et EOT</div>
        

Déclaration de Plusieurs Fichiers de Polices

Pour assurer une meilleure compatibilité entre les différents navigateurs, il est parfois nécessaire de déclarer plusieurs formats de fichier pour une même police. Chaque format alternatif est séparé par une virgule.


            @font-face {
                font-family: amadeus;
                src: url('Amadeus.woff') format('woff'),
                     url('maFonte.svg') format('svg'),
                     url('Amadeus.ttf') format('truetype');
            }
        

Compatibilité des Formats de Fichier de Polices

FormatDescriptionCompatibilité Navigateur
TTF/OTFDéveloppé par Apple puis MicrosoftChrome 4.0, Firefox 3.5, IE 9.0, Safari 3.1, Opera 10.0
WOFFFormat compressé, idéal pour le webChrome 5.0, Firefox 3.6, IE 9.0, Safari 5.1, Opera 11.1
SVGFormat graphique libre développé par le W3CChrome 4.0, Safari 3.2, IE 9
EOTExclusif à MicrosoftIE 9.0

Ce tableau fournit une vue d’ensemble de la compatibilité des différents formats de fichiers de polices avec les navigateurs web courants.

Autres Propriétés CSS Relatives à la Typographie

En complément de @font-face, d’autres propriétés CSS comme font-size, font-style, font-variant, font-weight jouent un rôle clé dans la personnalisation de la typographie sur le web.

Conclusion

La commande @font-face est un outil puissant pour les concepteurs web, permettant une grande créativité et personnalisation dans le design typographique des sites web. Bien que son utilisation nécessite une compréhension des différents formats de fichiers et de leur compatibilité avec les navigateurs, elle ouvre la porte à des possibilités de design quasi illimitées.

Maxime GUINARD
Maxime GUINARD

Merci d'avoir lu cet article. Je suis un développeur web WordPress passionné, et j'ai créé ce contenu avec soin pour vous offrir des informations de qualité. Restez connectés pour plus de conseils et d'astuces !

Facebook
Twitter
LinkedIn

Un projet en tête ?