CODEWITHSUNDEEP
htmlcssfonts
The Hawk
The Hawk

Reputation: 1568

Rendered Font is different than Font Family

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?

Upvotes: 6

Views: 4258

Answers (2)

Jay
Jay

Reputation: 912

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

Upvotes: 3

Arslan Akram
Arslan Akram

Reputation: 1516

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.

Upvotes: 0

Related Questions