Rendered Font is different than Font Family

Question

I have a DIN Regular True Type Font which I import and declare like this:

@font-face {
  font-family: 'DINRegular';
  src: url('../fonts/DINBek-Regular.ttf')  format('truetype'), 
}

body {
    font-family: 'DINRegular', Tahoma, Geneva, sans-serif;
}

However, I have an accordion in my site that always comes back Times New Roman. The Font Family in the code inspector is "DINRegular", but the rendered font on the "Computed" tab says the font is Times New Roman. Any ideas how to fix?

Answer 1

there is a comma after format('truetype') - deleted and add a semi colon

format('truetype');

also remove the quotes from the font family declaration in body so it's

font-family: DINRegular, Tahoma, Geneva, sans-serif;

also, if your browser doesn't support .ttf here's an example of a fuller font declaration:

@font-face {
font-family: 'myfont';
src: url('myfont.eot');
src: url('myfont.eot?#iefix') format('embedded-opentype'),
     url('myfont.woff2') format('woff2'),
     url('myfont.woff') format('woff'),
     url('myfont.ttf') format('truetype'),
     url('myfont.svg#myfont') format('svg');
}

after adding the other formats