Custom font doesn't work in CSS - shows Times new roman instead

I'm trying to add custom font to the project but it doesn't work.
That's how I added it to .css file:

 @font-face {
    font-family: 'Open Sans';
    src: url('/open-sans.eot');
    src: url('/open-sans.eot?#iefix') format('embedded-opentype'),
         url('/OpenSans-Regular.ttf') format('truetype'),
         url('/open-sans.woff') format('woff');

    font-weight: normal;
    font-style: normal;
}

That's how I'm using it

.panel-heading {
    font-family: 'Open Sans';
    font-size: 20px ;
}

Instead of my font I'm getting Times New Roman. The font is in the right folder, I even moved it to the same folder with .css files to avoid any doubts.

What am I doing wrong? Thanks in advance

The mistake was that I was writing the path to the font from the .css files folder. And I had to do it from /root folder.

So I moved all fonts back to root/fonts/

and fixed the code to

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/open-sans.eot');
    src: url('/fonts//open-sans.eot?#iefix') format('embedded-opentype'),
         url('/fonts//OpenSans-Regular.ttf') format('truetype'),
         url('/fonts//open-sans.woff') format('woff');

    font-weight: normal;
    font-style: normal;
}