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.
Solved! Go to 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.
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.