Forum Discussion

Indra_Optus's avatar
Indra_Optus
Guide
13 years ago

Custom Font ?

Is it possible to have custom font in Lithium (either buy adding it to Lithium or sourcing it using external URL)? Our company use custom font and would like to use it in Lithium page.   We have S...
Inactive User's avatar
Inactive User
11 years ago

Yup, the right custom skin is set. The fonts are sourced from https://www.google.com/fonts, and I've followed the quick-use instructions; i.e.,

 

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

was placed in the header wrapper and embeds the following

 

@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 700;
  src: local('Bitter-Bold'), url(http://themes.googleusercontent.com/static/fonts/bitter/v5/evC1haE-MsorTl_A7_uSGbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}

 and

 

.bitter { font-family: ‘Bitter’, Arial, serif; }

was placed in the active skin's custom css. The class was triggered in the markup like so:

 

<h1 class="bitter">And hopefully custom fonts work too.</h1>

I've also tried loading the font manually in the custom css only, so it doesn't seem to be a loading order problem. Any thoughts?

PaoloT's avatar
PaoloT
Lithium Alumni (Retired)
11 years ago
I would definitely try to download the fonts, upload these in the Studio Asset Library and then reference them from there.