Font-Face Not loaded

by

You have to have an @font-face declaration for each font:

@font-face { 
  font-family: OuachitaWayWbw; 
  src: url('fonts/Ouachita Way Wbw.ttf') format("truetype") ; 
}
@font-face { 
  font-family: ChromeYellowNF; 
  src: url('fonts/Chrome Yellow NF.ttf');
}

The single quotes are not required.

If you are wanting to use custom fonts for IE9 you will need to also provide an “.eot” font file. http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

EDIT: Ok, different browsers have different ways of implementing fonts:

@font-face {
   font-family: OuachitaWayWbw; 
   src: url('fonts/Ouachita Way Wbw.ttf') format("truetype"),
        url('fonts/Ouachita Way Wbw.woff') format("woff");
   src: url('fonts/Ouachita Way Wbw.eot');
}

You may also need to add the following types to an .htaccess/IIS:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

Taken from here: font-face with wrong MIME type in Chrome

More Related Contents:

  1. How to add some non-standard font to a website?
  2. Using .otf fonts on web browsers
  3. Use multiple @font-face rules in CSS
  4. Loading an external font via inline CSS
  5. @Font-face not working on mobile
  6. @font-face not working with specific version of Internet Explorer 11
  7. What are the steps to make a HTML design responsive? [closed]
  8. How do I vertically center text with CSS? [duplicate]
  9. Fill the remaining height or width in a flex container
  10. float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
  11. Why are my CSS3 media queries not working on mobile devices?
  12. How does the “position: sticky;” property work?
  13. A Space between Inline-Block List Items [duplicate]
  14. CSS vertical alignment of inline/inline-block elements
  15. How to remove the space between inline/inline-block elements?
  16. How do I install a custom font on an HTML site
  17. What’s a 3D doing in this HTML?
  18. Circular percent progress bar
  19. Setting table column width
  20. How to force table cell content to wrap?
  21. Inline style to act as :hover in CSS
  22. How to make a sticky footer using flexbox in IE11?
  23. Removing space at the top left and right of div
  24. Prevent scroll-bar from adding-up to the Width of page on Chrome
  25. Why do my list item bullets overlap floating elements
  26. How to add a background image on top of a previous background image?
  27. Css hover sometimes doesn’t work on svg paths
  28. Unwanted border-radius corners around images in Brave/Chrome browser
  29. Bootstrap 3 – show collapsed navigation for all screen sizes
  30. How can I prefix ordered list item numbers with a static string using CSS?

Leave a Comment