Rendered Font is different than Font Family - html

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

Answer 2

You're only defining a .ttf font, you need to define other formats like .woff .eot and .otf. You can generate these types by using your .ttf font through through Font Squirrel Webfont generator.
One thing to make sure is that you have the proper license for the font you're trying to use online.