How do I add Opan Sans .tff using CSS?

I want to use the OpenSans-Light.tff webfont that I downloaded off of Google Fonts. Here is what I am trying within my main.css:

@font-face {
    font-family:"OpenSans";
    src: url("fonts/OpenSans-Light.ttf");
}

.banner h1 {
    font-family: "OpanSans", arial;
}

Though it's not working.

Solution

If you want to use just @import use it like this:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

or add this to your HTML <head>

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

and then add this to your CSS

.banner h1{font-family: 'Open Sans', sans-serif;}