Posted By

eklemen on 09/20/12


Tagged

font-face


Versions (?)

@font-face multiple type variants


 / Published in: CSS
 

Using the same font-family name keeps things simple and provides a fallback

By changing the font-weight and font-style declarations of each @font-face rule to match each font’s properties, and using the same font-family name for each rule, we will no longer need to be overly specific in our CSS:

http://www.456bereastreet.com/archive/201012/font-facetipdefinefont-weightandfont-styletokeepyourcsssimple/

  1. /* Archer */
  2. @font-face {
  3. font-family: 'Archer';
  4. src: url('archer-book.eot');
  5. src: url('archer-book.eot?#iefix') format('embedded-opentype'),
  6. url('archer-book.woff') format('woff'),
  7. url('archer-book.ttf') format('truetype'),
  8. url('archer-book.svg#archer-book') format('svg');
  9. font-weight: normal;
  10. font-style: normal;
  11. }
  12. @font-face {
  13. font-family: 'Archer';
  14. src: url('archer-bookitalic.eot');
  15. src: url('archer-bookitalic.eot?#iefix') format('embedded-opentype'),
  16. url('archer-bookitalic.woff') format('woff'),
  17. url('archer-bookitalic.ttf') format('truetype'),
  18. url('archer-bookitalic.svg#archer-bookitalic') format('svg');
  19. font-weight: normal;
  20. font-style: italic;
  21. }
  22. @font-face {
  23. font-family: 'Archer';
  24. src: url('archer-bold.eot');
  25. src: url('archer-bold.eot?#iefix') format('embedded-opentype'),
  26. url('archer-bold.woff') format('woff'),
  27. url('archer-bold.ttf') format('truetype'),
  28. url('archer-bold.svg#archer-bold') format('svg');
  29. font-weight: bold;
  30. font-style: normal;
  31. }
  32. @font-face {
  33. font-family: 'Archer';
  34. src: url('archer-bolditalic.eot');
  35. src: url('archer-bolditalic.eot?#iefix') format('embedded-opentype'),
  36. url('archer-bolditalic.woff') format('woff'),
  37. url('archer-bolditalic.ttf') format('truetype'),
  38. url('archer-bolditalic.svg#archer-bolditalic') format('svg');
  39. font-weight: bold;
  40. font-style: italic;
  41. }

Report this snippet  

You need to login to post a comment.