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

Thanks for the replies. I understand that one doesn't have to upload google fonts -- I've linked it exactly as you have described above :)

 

Upon inspection of the stage source html the correct css is there, the google font is linked and and right class is being applied in the markup. I wondered if the font didn't work because it couldn't import external files -- now I'm thinking it might be because the css is loaded before the font is.

 

Is there any way to change the order in which the head wrapper and the custom css is applied?

MoniqueL's avatar
MoniqueL
Lithium Alumni (Retired)
11 years ago

Hmm no. The load order for css files is the core Base Skin > Your Custom Skin > any css files added in the assets folder,  then any css files linked in the head content.

 

Silly question, but is the custom skin where the font link/css live being applied to the community? Be sure to check via the admin > display > skins and see if the right skin has been set.

 

I see Paolo asked eariler if you were sourcing fonts over HTTP on a SSL page? Is this the case? Otherwise if what your syntax everywhere else is correct, the fonts should load.

  • 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.
    • JasonL's avatar
      JasonL
      Lithium Alumni (Retired)
      11 years ago

      Hi Inactive User 

      tried it out, this should work:

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

      believe it's missing the quote for the url (+ .bitter font-family quote ' doesn't seem correct - had to re-type the ' to fix)

      • Inactive User's avatar
        Inactive User
        11 years ago
        Ah yes! The quote marks around 'Bitter' were inverted commas instead of single straight quotes. What a strange problem to encounter -- my text editor doesn't change the quotemarks, so I'm not sure where it came from. Hmm! Thanks for spotting that, JasonL