SOLVED

Re: Editing Forms 2.0 Custom CSS

Go to solution
Anonymous
Not applicable

Editing Forms 2.0 Custom CSS

I'm trying to edit the custom css of my form, which is used on an external landing page, to change the font.  I followed the help article, but nothing is changing.  What am I doing wrong?

The CSS is question is:

{
  content: "";  
  position:absolute;
  width:1em;
  height:1em;  
  margin-left:-1.5em;
  line-height:1em;
  font-family:'Pontano Sans', sans-serif, !important; - this is where I'm tying to make the change
  font-size:14px;
  border:1px solid #ccced2;
  box-shadow:inset 1px 1px 4px 1px #ddd;
  background:#fff;
}

Any help is appreciated, thanks!
Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions
Corey_Bethel
Level 4 - Champion Alumni

Re: Editing Forms 2.0 Custom CSS

Hi Rachel,

It doesn't look like you are selecting anything with your CSS. Go ahead and remove the @import statement. You need to select the marketo form inside you CSS with this selector: .mktoForm

Add this code to your CSS file:

.mktoForm {
  font-family:'Pontano Sans', sans-serif !important; 
}

If that doesn't work, try this:


.mktoForm label {
  font-family:'Pontano Sans', sans-serif !important; 
}

Also, if your WordPress theme already supports Pontano Sans, you can probably remove the code that I gave you from your landing page. However, if it still doesn't work, try adding it back.


Hope this work! 
Corey Bethel
Consultant | Etumos

View solution in original post

7 REPLIES 7
Corey_Bethel
Level 4 - Champion Alumni

Re: Editing Forms 2.0 Custom CSS

Have you added the code for this font to your external landing page? If not, here is the code to add:

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

Also, try removing the comma after "sans-serif" so it reads: font-family:'Pontano Sans', sans-serif !important;
Corey Bethel
Consultant | Etumos
Anonymous
Not applicable

Re: Editing Forms 2.0 Custom CSS

Hi Corey,

I removed the comma after sans-serif !important;

The page I'm using is in a Wordpress theme and the theme I'm using allows me to set the font as Pontano Sans.  However, even when I add the code you provided into the individual page itself, it is still not returning the Pontano Sans font in my form. 

Any other suggestion?

Thank you!
Corey_Bethel
Level 4 - Champion Alumni

Re: Editing Forms 2.0 Custom CSS

Rachel,

Try adding this code to your CSS file at the top: 

@import url(http://fonts.googleapis.com/css?family=Pontano+Sans);

Also, did you place the first code I gave you as the first element of the <head> section of your page? It should look like this:

<head>
<link href='http://fonts.googleapis.com/css?family=Pontano+Sans' rel='stylesheet' type='text/css'>
your other code...
</head>
Corey Bethel
Consultant | Etumos
Anonymous
Not applicable

Re: Editing Forms 2.0 Custom CSS

Hi Corey,

I did both of these things and I'm still not seeing Pontano Sans:

1) Added the second code you gave me to the CSS file at the top, see screenshot below:

0EM50000000S4ja.jpg


2) Added first code you gave me to the <head> section of the page, see screenshot below:

0EM50000000S4jb.jpg

Is there something else I'm missing?  Really appreciate your help!
Corey_Bethel
Level 4 - Champion Alumni

Re: Editing Forms 2.0 Custom CSS

Hi Rachel,

It doesn't look like you are selecting anything with your CSS. Go ahead and remove the @import statement. You need to select the marketo form inside you CSS with this selector: .mktoForm

Add this code to your CSS file:

.mktoForm {
  font-family:'Pontano Sans', sans-serif !important; 
}

If that doesn't work, try this:


.mktoForm label {
  font-family:'Pontano Sans', sans-serif !important; 
}

Also, if your WordPress theme already supports Pontano Sans, you can probably remove the code that I gave you from your landing page. However, if it still doesn't work, try adding it back.


Hope this work! 
Corey Bethel
Consultant | Etumos
Anonymous
Not applicable

Re: Editing Forms 2.0 Custom CSS

.mktoForm {
  font-family:'Pontano Sans', sans-serif !important; 
}

Did the trick!

That is all i have in the custom CSS and that worked!  I left the code in my header stylesheet to be on the safe side.

Thanks Corey!

Corey_Bethel
Level 4 - Champion Alumni

Re: Editing Forms 2.0 Custom CSS

Awesome! Glad I could help!
Corey Bethel
Consultant | Etumos