Modifying Site Logo’s Font using CSS

Hi,

I have recently changed my theme and for the new theme located at mysterytribune.com I wanted to change the font for the logo of the site (site title).

Since the font I wanted to use was not a standard one, I created a folder in my theme folder, uploaded the font and then used the code below.

But somehow it does not work!!! I was wondering if you experts can help me.

/*
 Header Font
*/

@font-face {
    font-family: Quarto Bold;  
    src: url(http://www.mysterytribune.com/wp-content/themes/collecto/fonts/quarto-bold.ttf);  
    font-weight: normal;  
}

.site-title {
    font-family: "Quarto Bold", Frank Ruhl Libre, Times, serif; 
}

The page I need help with: [log in to see the link]