Using TypeKit with Gravity Forms. « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

rfrankel
Member
I'm not sure if anyone has experience with this or not but....

If you look at:
http://canvas3.swampedmagazine.com/?page_id=25
and select a 'job' (other then Sales Director) that the headings within the job posting are stylized using Typekit but the main headings are not styled correctly. The CSS that Typekit inserts is overridden by the GF CSS. I would like to avoid actually going into any of the core GF CSS and am wondering if there is a way to tell gravity forms not to add any Font selection.

I.E. This gets precedence....
```
.gform_wrapper .gsection .gfield_label, .gform_wrapper h2.gsection_title, .gform_wrapper h3.gform_title {
font-family:Helvetica,sans-serif;
font-size:16px;
font-weight:bold;
}
```
Over this.....
```
#ComingSoon h1, #Tagline h2, .gform_wrapper h3, .gform_wrapper h3.gform_title, .tk-angie-sans, h2 {
font-family:"angie-sans-1","angie-sans-2",sans-serif;
}
```
If anyone had any tips or ideas I would love to hear them.

Many thanks.
Posted 14 years ago on Monday September 20, 2010 | Permalink
Kevin Flahaut
Administrator

Just add the "!important" declaration at the end of your font-family property. That should do it for you. It worked in my quick test.

#ComingSoon h1, #Tagline h2, .gform_wrapper h3, .gform_wrapper h3.gform_title, .tk-angie-sans, h2 {font-family:"angie-sans-1","angie-sans-2",sans-serif!important}

As a note, you can always copy the contents of the forms.css file in the plugin directory and append it to your theme's style sheet. Then you can go into the form settings and set the "output css" option to "no". Once you've done that, you can edit away on your copy and the changes will be safe when you auto-update the plugin.

Posted 14 years ago on Tuesday September 21, 2010 | Permalink
rfrankel
Member

Hey Kevin,
I would have done the '!important' fix except that the CSS generated from TypeKit actually is adding that CSS to mine. As far as I can see, I don't have access to add !important to their code. I could add it manually, but then it would remove some of the features of using typekit (that being changing the font with no code changes...).

I guess the way to go here is your second option, moving the fomrs.css file to my themes locale.

Thanks for the response.

Posted 14 years ago on Wednesday September 22, 2010 | Permalink