#font-face not working in chrome - css

Question

I´ve finally continued work on a hobby-project of mine, after months. I had some computer problems at the beginning of the year, had to do a new Windows install, lost the DB, but could retrieve the scripts. As far as I know, everything is exactly the same as before, except for the absolute urls. I´m working purely on localhost. I´m sure everything was working fine in all major browsers before I stopped working on it, unless my memory fails me. Trying to get it to work, I simplified the code / filename:
#font-face
{
font-family: "cabin" ;
src: url("http://localhost/hrhr/fonts/cabin.ttf");
}
*
{
margin: 0px;
padding: 0px;
border: 0px;
font-family: "cabin";
}
Some remarks:
As said, it does not work in Chrome (33), nor does it work in Opera (20).
It does work in Internet Explorer (11). It already worked without simplifying the code and file name.
As said, I´m pretty sure everything was working fine a few months ago, and nothing has changed apart from absolute urls, and the browser versions.
As suggested by an anwser from a similar question, I´ve tried adding the format, this didn´t help.
I´ve tried variations on quotes.
It generally doesn´t show up in Chrome developer tools under resources. Strangely sometimes it does (after trying variations on the code), and when that happens, it displays the name right, but the example font is wrong (presumably Times New Roman).
I´ve tried copying the font file in other folders and using relative urls.
It displays fine if I remove the #font-face rule, install the font, and just use the local reference, and it also works if I use a Google webfont reference.
I think I´m grossly overlooking something, but Googling didn´t help me yet, and I find it strange IE has no problems whatsoever with my code. Thanks in advance.
Edit:
The font can be found here:
http://www.impallari.com/cabin
Edit 2:
Thanks to Dima´s anwser, I´ve solved the problem, but I´m no closer to understanding it.
I used the fonts and script the site provided me, like I said, that worked, then step by step, I removed elements so it resembled the original situation more and more, until it stopped working again. So basically, I can get it to work with my script and the "converted" ttf file, so the problem seems to be inherent to the original ttf file itself. The script, file paths or cross browser compatibility aren´t the problem. Once converted, Chrome had no issues with it. But I have no idea what the technical difference is.
Tomorrow I´ll see if I can find a font viewer to see if I can find the difference. I also may mail the creator of the font (asking if he´s aware of problems with it), and I´d like to know if other people have issues with the font "as is", so without converting it. Unless someone gives me a technical explanation, I´ll accept Dima´s anwser and will just learn to "convert" the font.

Answer 1

try using it like this:
#font-face {
font-family: 'Cabin';
src: url("/fonts/cabin.eot");
src: url("/fonts/cabin.eot?#iefix") format("embedded-opentype"), url("/portals/0/fonts/cabin.woff") format("woff"), url("/fonts/cabin.ttf") format("truetype"), url("/fonts/cabin.svg#cabin") format("svg");
font-weight: normal;
font-style: normal;
}
this will make sure that all browsers are covered... your best bet is to upload .ttf font to web font generator like this one or this one, it will then generate the web font in different formats and you'll be able to download it... it will also include the CSS for it which will be similar to the one I showed above
EDIT: to answer your question about why that is, there is no right or wrong answer, that's just the way it is. Different browsers support different font formats. You can read about some of it here

Answer 2

You can even use #import url('fonts/cabin.ttf');
And to use it, open your TTF File, and see the name of the font, if it says Cabin, then, font-family: 'Cabin';