Advanced Search

Posted By

eklemen on 09/20/12

Tagged

Versions (?)

Last Edited at 09/20/12 05:43am

Statistics

Viewed 715 times
Favorited by 0 user(s)

Related snippets

803
Bulletproof @font-face syntax
549
Robust @font-face
790
BULLETPROOF @FONT-FACE
808
Embed font face
2
Font Face CSS
764
Fix @font-face bold in webkit
1
@font-face
1
@font-face

@font-face multiple type variants

/ Published in: CSS
Save to your folder(s)
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-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.