Attribut font-face CSS - Maxime GUINARD

Agence Intégrateur WordPress

0 Comments

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

Format	Description	Compatibilité Navigateur
TTF/OTF	Développé par Apple puis Microsoft	Chrome 4.0, Firefox 3.5, IE 9.0, Safari 3.1, Opera 10.0
WOFF	Format compressé, idéal pour le web	Chrome 5.0, Firefox 3.6, IE 9.0, Safari 5.1, Opera 11.1
SVG	Format graphique libre développé par le W3C	Chrome 4.0, Safari 3.2, IE 9
EOT	Exclusif à Microsoft	IE 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 !

Avantages	Inconvénients
Permet d’utiliser des polices de caractères personnalisées sur un site web	Le chargement de polices externes peut affecter les performances de la page
Facilite la personnalisation du style typographique d’un site	La sélection de polices appropriées peut être cruciale pour l’esthétique du site
Contribue à une expérience utilisateur plus unique et attractive	La compatibilité avec certains navigateurs peut être un défi
Améliore la cohérence du design en utilisant des polices spécifiques	Le téléchargement de plusieurs polices peut entraîner un temps de chargement plus long

Les autres références PHP : Selecteur out-of-range Écran CSS, Balise address HTML, Balise ins HTML, Balise time HTML, Attribut Border-Image-Outset CSS, Selecteur, Proximite CSS, Expressions Regulieres PHP, Extraction Chaine PHP, Instruction Affichage PHP, Attribut font-face CSS, Attribut filter CSS, Attribut vertical-align CSS, Événement javascript, SetTimeout Javascript, prototype javascript.

      
   Maxime GUINARD | Développeur & Webdesigner WordPress indépendant
   148 avis Google 
  Écrire un avis 
  
 
 
   
 
 
        
   Myriam SRIKANTHA 
 2023-12-21
 
 
  Maxime GUIMARD a pris le temps de présenter son métier, auprès de mes classes de lycéen.  Présentation efficace, claire et compréhensible. Il a été à l’écoute des questions des lycéens.  Un grand merci à lui d’avoir pris le temps d’expliquer sa passion !
  
 
       
   Philippe BERTIEAUX 
 2023-10-01
 
 
  Maxime a une capacité que peu de SEO managers ont à ce jour ; celle de pouvoir s'adapter de manière extrêmement rapide et d'une manière particulièrement efficace, à toutes situations techniques inconfortables, mêmes les plus délicates. Le résultat est toujours au rendez-vous. Merci Maxime.
  
 
       
   Cuong Doan 
 2023-09-30
 
 
  J'ai travaillé avec Maxime sur un projet d'optimisation, où nous avons indexé les pages sur Google Search Console et effectué des corrections techniques en SEO. Il a réussi à résoudre tous les problèmes. Il est toujours disponible pour répondre à toutes les questions, très professionnel. C'était un plaisir de travailler avec lui ????????????.
  
 
       
   Artus Trézières 
 2023-09-30
 
 
  J'ai adoré travailler avec Maxime. Il est à l'écoute, gentil, et très compétent. De plus, il travaille extrêmement bien. Je le recommande vivement !
  
 
       
   Romain Knockaert 
 2023-09-01
 
 
  J'ai commandé auprès de Maxime une base pour un serveur Garry's Mod, n'ayant ni les compétences nécessaires ni le temps, il m'a aidé et m'a fourni une base propre avec des addons qu'il a fait lui-même pour un prix plus que raisonnable ! Grâce à lui j'ai pu gagner beaucoup de temps pour l'exécution de mon projet 🙂 je recommande !
  
 
       
   maha 
 2023-08-27
 
 
  Maxime GUINARD se distingue vraiment en tant que développeur web indépendant de haut calibre ! Sa maîtrise du développement WordPress et du design web est tout simplement impressionnante. Je suis extrêmement satisfaite de la qualité de son travail et je n'ai aucune hésitation à le recommander chaudement. Il mérite amplement toutes les étoiles possibles, soit 5 étoiles sans aucun doute !
  
 
       
   Nathou M 
 2023-05-24
 
 
  Super !
  
 
       
   Mario Mario 
 2023-05-24
 
 
  Super site web
  
 
       
   Mitsuko 
 2022-07-14
 
 
  Hello,  Maxime ma fait un super site web et aussi une carte en 3D ! J'ai passé 6 mois avec Maxime pour le tout. J'ai eu la chance de faire de superbes rencontres et de découvrir Maxime. Quelqu'un de dévouée et super bienveillant qui m'a permis de grandir et de m'accompagner tout au long de ma commande. Maxime est à l'écoute !
  
 
       
   M Mestchersky 
 2022-04-11
 
 
  Maxime is an excellent web developer and SEO consultant. Need any SEO advice? He is the one you're looking for.

Adresse

Avenue du bac
94210 SAINT MAUR DES FOSSES

Téléphone

06.65.13.24.36

Emails

dev@maxime-guinard.fr maxime.guinard.pro@gmail.com