AnsweredAssumed Answered

Webfonts in custom CSS

Question asked by JamesPreston on Jan 21, 2016
Latest reply on Jan 28, 2016 by 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.

Outcomes