CSS font face is not working on Mozilla Firefox, Microsoft Edge and Opera

Question

I'm using the "DinRoundWeb" and "DINRoundComp" font families for a website. The declaration in the CSS stylesheet is done look this:

 @font-face {
 font-family: Din;
 src: url("fonts/DINRoundWeb.eot"), url("fonts/DINRoundWeb.woff")              format("woff"), url("fonts/DINRoundComp.ttf") format("truetype");
 font-weight: 400;
 }
 @font-face {
 font-family: Din;
 src: url("fonts/DINRoundWeb-Medium.eot"), url("fonts/DINRoundWeb-  Medium.woff") format("woff"), url("fonts/DINRoundComp-Medium.ttf")    format("truetype");
 font-weight: 600;

}

and the font files are in the fonts folder. Body style is the following:

   body{
   font-family: Din ,sans;
   color: #444;
   line-height: 1.5rem;
   font-size: 1rem;
   background-color: #f3f3f3;
   }

The style isn't applied in the page, moreover is not only appearing under Web Developer Tools-> Fonts-> All Fonts.

I would appreciate a lot any indication! The style i

Perhaps it is because you have two `@font-face` rules that have the same `font-family` property? — CAG2, Dec 23 '18 at 14:40

score 0 · Accepted Answer · answered Dec 23 '18 at 19:18

0

Try a relative path, from perspective of your css file. You need an extra font-family for each weight, like this:

@font-face {
  font-family: 'DNRM';
  src: url('../fonts/DINRoundWeb-Medium.eot');
  src: url('../fonts/DINRoundWeb-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/DINRoundWeb-Medium.woff') format('woff');
}

@font-face {
  font-family: 'DNRR';
  src: url('../fonts/DINRoundWeb.eot');
  src: url('../fonts/DINRoundWeb.eot?#iefix') format('embedded-opentype'), url('../fonts/DINRoundWeb.woff') format('woff');
}

answered Dec 23 '18 at 19:18

Daniel Sixl

2,488
2
16
29

Thank you! It worked using your formula only I added the "!important" keyword to override Bootstrap. – Dec 25 '18 at 09:58
1

Also be aware that there are no official browsers that understand `eot`, nor have there been since January 2016 when Microsoft aggressively killed off IE8 and below, with IE9 and IE10 following when Vista was permanently shuttered a little later. – Mike 'Pomax' Kamermans Dec 26 '18 at 04:58
Thank you @Mike'Pomax'Kamermans, for pointing this out. Here a link on SO: https://stackoverflow.com/questions/36105194/are-eot-ttf-and-svg-still-necessary-in-the-font-face-declaration – Daniel Sixl Dec 26 '18 at 12:05

CSS font face is not working on Mozilla Firefox, Microsoft Edge and Opera

1 Answers1