Question

Facing a problem in integrating google fonts in my landing page

  • 7 September 2017
  • 3 replies
  • 18 views
A

I followed all steps in this link:https://documentation.unbounce.com/hc/en-us/articles/203510114-Adding-and-Editing-Text

But it isn’t happening.

Here is my code
Javascript:

@import url(‘https://fonts.googleapis.com/css?family=Lato:300’);

CSS:

paragraph * {
font-family: ‘Lato’, sans-serif;
}

What am I doing wrong?

3 replies

Stefano
Userlevel 7
Badge +4

Here is an example of CSS on one of our pages!

<link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">

<style type="text/css">
  
   p, #lp-pom-form-496 {
      font-family: 'Coming Soon', cursive !important;
      font-weight: 400

  }  
    
   h1 {
      font-family: 'Poppins', sans-serif !important;
      font-weight: 400

  }  
  
</style>

Replace the values above with yours and you should get this working!

digibomb
Userlevel 6
Badge +1

@Akash the @import will work as well. Just make sure to target the right elements in Unbounce

<style>

  /* Apply to headings 1 and 2 */
  h1, h1 span,
  h2, h2 span {
    font-family: 'Tinos', serif, Fallback, sans-serif !important;
  }

  /* Apply to buttons */
  a.lp-pom-button {
    font-family: 'Alright Sans', Fallback, sans-serif !important;
  }

  /* Apply to entire page */
  span, p, a, label {
    font-family: 'Alright Sans', Fallback, sans-serif !important;
  }
  
</style>
Jordana

Hi @Akash

We’ve actually recently added Google Fonts as a built-in feature to the Builder! Check out this community announcement to see how it works: Introducing Google Fonts! 🎉

Jordana

Reply


Terms & ConditionsCookie settings