Custom font declaration doesn't work - css

Question

I'm using the following code in my css:
#font-face {
font-family: "rsfont";
src: url("rsfont.ttf");
}
body {
font-family: 'rsfont';
}
I have a rsfont.ttf file in the same folder as my css file, but it just doesn't work. Why?

Answer 1

.ttf font works in Safari, Android, iOS. To make the font work in all browsers you need to make more font formats using a fontface generator. You can use the one on fontsquirrel
Your final #fontface declarations should be something like this to work in all browsers supporting the #fontface
#font-face {
font-family: 'rsfont';
src: url('rsfont.eot'); /* IE9 Compat Modes */
src: url('rsfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('rsfont.woff') format('woff'), /* Modern Browsers */
url('rsfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('rsfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Answer 2

You could try to change it to the following
#font-face {
font-family: "rsfont";
src: url('rsfont.ttf') format('truetype');
}
However, not all browsers support the same filetypes! You'd need to convert it to multiple files using something like FontSquirrel. You can check a compatibility matrix here: https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face

Answer 3

You need to specify a format and for full cross browser support you should add a woff and eot. The following code will support all browsers (as long as you have the right font files)
For all modern browsers you really only need an eot and woof file.
#font-face{
font-family:rsfont;
src:url(rsfont.eot);
src:url(rsfont.eot) format("embedded-opentype"),
url(rsfont.woff) format("woff"),
url(rsfont.ttf) format("truetype")
font-weight:400;
font-style:normal
}