How to add multiple font files for the same font?

by

The solution seems to be to add multiple @font-face rules, for example:

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

By the way, it would seem Google Chrome doesn’t know about the format("ttf") argument, so you might want to skip that.

(This answer was correct for the CSS 2 specification. CSS3 only allows for one font-style rather than a comma-separated list.)

More Related Contents:

  1. How to add some non-standard font to a website?
  2. Are eot, ttf, and svg still necessary in the font-face declaration?
  3. Wait for fonts to load before rendering web page
  4. Why should we include ttf, eot, woff, svg,… in a font-face
  5. Using .otf fonts on web browsers
  6. Use multiple @font-face rules in CSS
  7. Loading an external font via inline CSS
  8. Multiple font-weights, one @font-face query
  9. Fallback fonts on special characters
  10. Non-Standard fonts in web?
  11. Preloading @font-face fonts?
  12. Fix custom font line-height with CSS
  13. How do I make an attributed string using Swift?
  14. Browsers’ default CSS stylesheets
  15. How to know if a font (@font-face) has already been loaded?
  16. Recommended Fonts for Programming? [closed]
  17. Why is @font-face throwing a 404 error on woff files?
  18. How to detect which one of the defined font was used in a web page?
  19. How to embed .ttf fonts in JavaFx 2.2?
  20. How is font size calculated?
  21. Make Adobe fonts work with CSS3 @font-face in IE9
  22. Converting and rendering web fonts to base64 – keep original look
  23. How to force anti-aliasing in JavaFX fonts?
  24. Fonts looks different in Firefox and Chrome
  25. @Font-face not working on mobile
  26. Font size rendering inconsistencies on an iPhone
  27. Forcing anti-aliasing using css: Is this a myth?
  28. Rails 4: Why are fonts not loading in production?
  29. How to add a custom font to Rails app?
  30. Embed font into PDF file by using iText

Leave a Comment