Using TTF files for font-family

Question

I am trying to use a .ttf file downloaded from web to use 'anagram.ttf' as my font-family.

<html>
<head>
    <style>
    @font-face {font-family: 'Anagram'; src: url('anagram.ttf');}
    p{font-family:anagram;}
    </style>
</head>
<body>
    <p>This is paragraph one.</p>
    <p>This is paragraph two.</p>
</body>
</html>

But, finally my browser is showing as:

Rendered fonts: Times New Roman—22 glyphs

Also showing warning in console:

Failed to decode downloaded font: file:///C:/codebook/external%20fonts/anagram.ttf

Is my syntax wrong or any other problem?

just check this one http://stackoverflow.com/questions/30442319/failed-to-decode-downloaded-font — Amit singh, Sep 25 '15 at 08:18
this error only occurs when the font decoded is not loaded means the url is mistake — Amit singh, Sep 25 '15 at 08:19

score 3 · Accepted Answer · answered Sep 25 '15 at 08:04

3

Please make this changes to your code so that it can understand what type of file format it is.

@font-face {
  font-family: 'Anagram';
  src: url('anagram.ttf')  format('truetype');
}

answered Sep 25 '15 at 08:04

Vaibhav Mule

5,016
4
35
52

Your syntax is not wrong. Make sure your file is correct wherever you downloaded from. – Vaibhav Mule Sep 25 '15 at 08:11
Tell me from where have you downloaded anagram.ttf? – Vaibhav Mule Sep 25 '15 at 08:18

score 2 · Answer 2 · edited Jun 19 '20 at 20:28

2

Do like this or there may be some error while referencing the font..

Or there may be the url issue..

@font-face {
    font-family: 'Anagram';
    src: url('anagram.ttf') format('truetype');
}

div {
    font-family: Anagram;
}

edited Jun 19 '20 at 20:28

Dave Jarvis

30,436
41
178
315

answered Sep 25 '15 at 08:13

Amit singh

2,006
1
13
19

http://www.fontsquirrel.com/fonts/list/tag/heavy - I downloaded 'anagram.ttf' from here ... see it – Deadpool Sep 25 '15 at 09:27

Using TTF files for font-family

2 Answers2