Webfonts in custom CSS

[JamesPreston]

I am adding custom CSS to the Basic Template application, and want to use a webfont for some of the text. Is this possible with the custom CSS tool?

I have played around with the @font-face rule in the CSS, thinking that this might provide a workaround, but to no avail. I feel that there is something that I am not quite grasping, as I am new to CSS and HTML.

Here was what I used:

@font-face {
    font-family: 'Open Sans Condensed', sans-serif;
    src: url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
}

#title {
font-family : 'Open Sans Condensed', sans-serif !important;
}

From what I can understand after some googling, it seems that webfonts may only be able to be imported in the HTML of a page, and then utilised with CSS. Is this correct?

EDIT:

SOLVED!

I came across this on StackOverflow: http://stackoverflow.com/questions/14676613/how-to-import-google-web-font-in-css-file

Here is the CSS that finally got me the result:

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
#title {
font-family : 'Open Sans Condensed', sans-serif;
}

I think that one key thing to mention, that is covered in that StackOverflow discussion, is that the @import line needs to sit in the top line of your CSS.

[JamesPreston · Accepted solution]

Replying to original post so that I can mark it as answered:

I came across this on StackOverflow: http://stackoverflow.com/questions/14676613/how-to-import-google-web-font-in-css-file

Here is the CSS that finally got me the result:

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);  
#title {  
font-family : 'Open Sans Condensed', sans-serif;  
}

I think that one key thing to mention, that is covered in that StackOverflow discussion, is that the @import line needs to sit in the top line of your CSS.