Multiple font-weights, one @font-face query

by

Actually there is a special flavor of @font-face that will permit just what you’re asking.

Here’s an example using the same font-family name with different styles and weights associated with different fonts:

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Italic-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Bold-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}

You can now specify font-weight:bold or font-style:italic to any element you like without having to specify the font-family or overriding font-weight and font-style.

body { font-family:"DroidSerif", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}

For a full overview of this feature and the standard use take a look at this article.

EXAMPLE PEN

More Related Contents:

  1. Are eot, ttf, and svg still necessary in the font-face declaration?
  2. Wait for fonts to load before rendering web page
  3. Why should we include ttf, eot, woff, svg,… in a font-face
  4. Fallback fonts on special characters
  5. Non-Standard fonts in web?
  6. Fix custom font line-height with CSS
  7. Browsers’ default CSS stylesheets
  8. CSS Font Border?
  9. Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading
  10. Why is @font-face throwing a 404 error on woff files?
  11. CSS @font-face absolute URL from external domain: fonts not loading in firefox
  12. Failed to decode downloaded font
  13. How to import fonts in CSS?
  14. How is font size calculated?
  15. Converting and rendering web fonts to base64 – keep original look
  16. Use multiple @font-face rules in CSS
  17. Loading an external font via inline CSS
  18. Webfont Smoothing and Antialiasing in Firefox and Opera
  19. Force Non-Monospace Font into Fixed Width Using CSS
  20. Fonts looks different in Firefox and Chrome
  21. Specifying Style and Weight for Google Fonts
  22. CSS @font-face not working in IE8
  23. Styling Password Fields in CSS
  24. What does font-size really correspond to?
  25. font-face with wrong MIME type in Chrome
  26. Internet Explorer @font-face is failing
  27. Forcing anti-aliasing using css: Is this a myth?
  28. Preloading @font-face fonts?
  29. Using @font-face with Rails 3.1 app?
  30. How to add a custom font to Rails app?

Leave a Comment