CSS Family Issue - css

Question

I am using this css script :
#top_menu li a {
display:block;
margin-top:2px;
font-family: 'Federant', cursive;
font-size:16px;
color:#8f7a60;
padding:21px 30px;
border-right:1px solid #1e1a18;
border-left:1px solid #302a26;
}
for a text on my website but it doesn't not make it federant family. How to include it ?

Answer 1

Without any details on the context of the provided CSS, we can only guess the possible issues.
The most likely is that the Federant font is not a standard web font. If it is not installed on the visitor's system, the page cannot use it.
You can provide fallback standard fonts (you should in fact).
You can also, if the licence of the font allows it, embed it in your stylesheet. So the browser will load the font and apply it to the links.
Here's an example of code to embed a font :
#font-face {
font-family: 'Federant';
src: url('fonts/Federant.eot'),
url('fonts/Federant.ttf') format('truetype'),
url('fonts/Federant.svg') format('svg');
font-weight: normal;
font-style: normal;
}

Answer 2

It sounds like the CSS does not know what that font is, so it must be included.
See, there are webfonts which are built-in fonts in the browser, such has sans-serif, arial, serif, etc. If it is not a 'webfont' then it must be manually included.
To do so, you will need the font files, and then you can include them in your CSS like this:
#font-face Federant {
font-family: 'Federant';
src: url(../fonts/Federant.woff);
}
#top_menu li a {
font-family: Federant;
}