Développement web indépendant à Montpellier

Publié le mardi 30 juillet 2013 13:10:36

Inclure des polices personnalisées en CSS

Il est loin le temps où l'on avait qu'un choix restrictif de polices à utiliser sur le net. Maintenant on peut plus ou moins utiliser les polices que l'on souhaite grâce à CSS3 et l'instruction @font-face décrite depuis  un bail mais implémenté récemment dans les navigateurs.

Avant, on utilisait Sifr (en flash) ou d'autres techniques Javascript. (cufon etc...)

Vous avez déjà un choix intéressant de police sur Google Fonts, mais vous il est également possible d'héberger votre propres polices. Une démo ici : http://demo.ligams.free.fr/fonts/

La théorie

En CSS, déclarez simplement votre police, puis appliquez le style, ici pour h1 :

 @font-face {
    font-family: "PolicePerso";
    font-weight: normal;
    src: url('PolicePerso.ttf');
}
h1 {
    font-family: "PolicePerso";
}

La pratique

Ce serait trop facile ! en réalité tous les navigateurs n'apprécient pas forcément TTF (truetype), notamment les anciennes versions d'Internet Explorer (Internet Explorer 10 c'est bon, mais pas avant).

Il faut servir aux vielles version d'IE un format opentype EOT. Si vous ne disposez pas de cette police au format EOT,  vous pouvez facilement convertir vos polices TTF en EOT.

Modification de la CSS :

 @font-face{ 
     font-style:normal; 
     font-weight: normal;
     font-family:'PolicePerso'; 
    src: 
    url('PolicePerso.eot?') format("embedded-opentype"),
    url('PolicePerso.ttf') format("truetype");
}
h1 {
    font-family: "PolicePerso";
}

Notez la présence du point d'interrogation derrière l'URL de la police Opentype, ce n'est pas une coquille. Ne l'oubliez pas.

En faisant ainsi, vous afficherez votre police à partir de la version 5.5 d'Internet Explorer.

Notez cet article !

  • Actuellement 4.5 sur 5 étoiles
  • 1
  • 2
  • 3
  • 4
  • 5

Note : 4.7/5 (6 notes attribuées)

Merci d'avoir participé !

Vous avez déjà noté cette page, vous ne pouvez la noter qu'une fois !

Votre note a été changée, merci de votre participation !

Bonne résolution ! j'arrête d'alourdir mes pages avec des boutons de partage, mais vous pouvez continuer de partager :-)

Commentaires

  1. I found a good Website with telephone numbers for customer service http://...r-service/

  2. This is just the information I am finding everywhere. Thanks for your blog, I just subscribe your blog. This is a nice blog..

  3. I am happy to find your distinguished way of writing the post. Now you make it easy for me to understand and implement the concept. Thank you for the post.

  4. edu and g... | edu and gov backlinks for seo |

    Thank you so much for sharing this great blog.Very inspiring and helpful too.Hope you continue to share more of your ideas.I will definitely love to read.

  5. I was surfing net and fortunately came across this site and found very interesting stuff here. Its really fun to read. I enjoyed a lot. Thanks for sharing this wonderful information.

  6. Thanks for sharing this information. I really like your blog post very much. You have really shared a informative and interesting blog post with people..

  7. I found a good Website with telephone numbers for customer service
    http://...r-service/

  8. sell stru... | sell structured settlements |

    I am very much pleased with the contents you have mentioned. I wanted to thank you for this great article.

  9. Excellent article. Very interesting to read. I really love to read such a nice article. Thanks! keep rocking.

  10. I am happy to find this post very useful for me, as it contains lot of information. I always prefer to read the quality content and this thing I found in you post. Thanks for sharing.

  11. I would like to say that this blog really convinced me to do it! Thanks, very good post.

  12. Wonderful article, thanks for putting this together! This is obviously one great post. Thanks for the valuable information and insights you have so provided here.

  13. medical c... | medical cannabis guardianships |

    Thanks for sharing the info, keep up the good work going.... I really enjoyed exploring your site. good resource...

  14. Your blog provided us with valuable information to work with. Each & every tips of your post are awesome. Thanks a lot for sharing. Keep blogging,

  15. My friend recommended this blog and he was totally right keep up the good work

  16. Amazing article thanks or sharing..

  17. normal and relevant information with phone numbers of support services found only here
    http://...00-number/

  18. I searched many information this disease on the Internet, because it is very unpleasant disease and embarrassed to talk about it, and then found a lot of useful information
    http://...rhoid.com/

  19. for lovers of dogs, found a cool rock, big and beautiful, here on the site there is a photo and a story about it
    http://...ardog.net/

  20. C'est génial de rencontrer un blog de temps en temps qui n'est pas le même
    De la date rehashed matériel. Grande lecture!

  21. Thanks for the great post. I’m a big fan of your writing style. I will comeback and read all the other articles you posted

  22. I found a good Website with telephone numbers for customer service http://...r-service/

  23. canewilia... | Dissertation Writing Service |

    I personally like your post, you have shared good article. It will help me in great deal.
    <a href="http://...>Thesis Writing Help</a>

  24. Physical... | Physical Layer Project Help |

    Amazing article thanks or sharing..

  25. do my com... | do my computer science homework |

    My friend recommended this blog and he was totally right keep up the good work

  26. online mb... | online mba dissertation writing service |

    This was a great and interesting article to read. I have really enjoyed all of this very cool information

  27. I personally like your post; you have shared good insights and experiences. Keep it up.

  28. I'm getting excited about this kind of beneficial information of your stuff in the future

  29. Mechanica... | Mechanical Engineering Project Help |

    I loved the way you discuss the topic great work thanks for the share.

  30. I found a wonderful site, and there is a cool breed of http://...kyinfo.net

  31. We're the most effective online games website

  32. Solitary gamer and multiplayer game

  33. for lovers of dogs, found a cool rock, big and beautiful, here on the site there is a photo and a story about it

  34. normal and relevant information with phone numbers of support services found only here

  35. I searched many information this disease on the Internet, because it is very unpleasant disease and embarrassed to talk about it, and then found a lot of useful information

  36. Thanks for sharing this information. I really like your blog post very much. You have really shared a informative and interesting blog post with people.

  37. Your blog provided us with valuable information to work with. Each & every tips of your post are awesome. Thanks a lot for sharing. Keep blogging.

  38. Fine post. Thanks, I ll follow the next one. Useful and interesting information

  39. Admirer le dévouement que vous mettez dans votre site et en profondeur des informations que vous présentez.
    C'est génial de rencontrer un blog de temps en temps qui n'est pas le même
    De la date rehashed matériel. Grande lecture!

  40. This is really good idea. Thanks for sharing!

  41. Well thanks for posting such good content and I appreciate your efforts to download
    <a href="https:/...;Blackmart Alpha Apk</a>
    <a href="http://...;Blackmart Alpha Apk</a>
    <a href="http://...;Blackmart Apk Download</a>

  42. CSS3 n'a cessé de nous étonner surtout avec la fonctionnalité @font-face. Merci pour les codes mentionnés.

  43. lomazz55@... | loma |

    Play Free online Flash Games on your PC

    http://...gamers.net
    http://...gossip.net
    http://...eels.ninja

    more fun playing your favorite flash game

  44. C'est une fonction que j'utilise tous les jours, je suis devenu un vrai maniaque de la typographie. Mais c'est vrai que cela peut changer une page web du tout au tout, donc c'est à connaitre.

  45. Globaliza... | Globalization of Hyatt Place Case Solution |

    I cherished the way you talk about the point awesome work much obliged for the share Your useful post.

  46. Thank you, I've been seeking for info about this subject matter for ages and yours is the best I have discovered so far

  47. Merci pour ce tuto.

  48. Très utile, merci beaucoup chef

  49. J'apprends le CSS3 en ce moment, et vous m'avez fillé un bon coup de main dans ma recherche !
    Merci.

  50. Juste pour info et pour faire un peu de la pub...
    En SASS avec le framework Compass ça donne:

    @import compass/css3

    +font-face("PolicePerso", "PolicePerso.ttf", "PolicePerso.eot")

    .h1
    font-family: "PolicePerso"

    --
    :D

  51. Zakia | comparer les banques |

    CSS3 n'a cessé de nous étonner surtout avec la fonctionnalité @font-face. Merci pour les codes mentionnés.