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(;

#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?






I came across this on StackOverflow:


Here is the CSS that finally got me the result:


@import url(;
#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.