CSS外部字体在Div中不起作用

Question

Recently I downloaded a font for my site and renammed it "a.ttf". When I try embeding it into a CSS id for a div however, it doesn't seem functional. Does anyone know the problem here? Thank you very much and have a great day! I forgot to mention also my external CSS page is functioning as I have working classes in other divs. I just inspected element and it now says Failed to decode downloaded font. WHAT DOES THIE MEAN. ARGGHHH! :-)

CSS Code

@font-face 
{
font-family: a;
src:url("a.ttf");
}

#text
{
color: white;
font-family: a;
font-size: 25px;
font-weight: bold;
text-align: left;
margin-left: 15px;
margin-top: 20px;
}

HTML Div

<div id="text">Test Div</div>

Answer 1

I think you try this one...

Css

@font-face {
  font-family: 'a';
  src: url('a.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
#text{
 color: white;
 font-family: a;
 font-size: 25px;
 font-weight: bold;
 text-align: left;
 margin-left: 15px;
 margin-top: 20px;
}

Hope this helps.

Answer 2

Hey I think the code you are using is wrong. If you go to FontSquirrel and download a font kit this is the recommended way to add custom fonts

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

}

You need more that one extension for the font so it works in all browsers. Also where is your font located??... the path might not be the same as you css file

Answer 3

1. use single quote in src:url('a.ttf');
2. make sure that the (a.ttf) in the same path of css file.

Internet Explorer has some ttf support starting with version 9, but "only working when [fonts are] set to be installable".

Answer 4

When you are using the @font-face rule, please ensure you use the following syntax:

@font-face {
    font-family: 'My Font';
    font-style: normal;
    font-weight: 400;
    src: url('../path/to/My-Font.ttf') format('ttf');
}

The error you seem to be getting means the file (font file) you download may have been damaged while it was getting downloaded or it may have been damaged on the server itself. I recommend you download the font again from the same website OR download it again from a different site.

When you are going to use a custom font, please ensure you use the following syntax:

#text {
    color: white;
    **font-family: 'My Font'**;
    font-size: 25px;
    font-weight: bold;
    text-align: left;
    margin-left: 15px;
    margin-top: 20px;
}

Of course, if you copy my code, make sure you take out the asterisk (*).

---

Here is some more information about the @font-face rule, here:

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Here:

https://css-tricks.com/snippets/css/using-font-face/

And, here:

https://developer.mozilla.org/en/docs/Web/CSS/@font-face