You are viewing limited content. For full access, please sign in.

Question

Question

How to add a non-theme font across a whole form?

Forms Version 10
Updated January 17, 2019
asked on January 13, 2019

Hi guys,

I need to change the font for the labels and field content on a form to Roboto for everything.  I initially used a Theme for the form so am having to override the font settings with CSS.  I've gotten as far as the following CSS for a single label

/*Import Roboto font*/
@import url('https://fonts.googleapis.com/css?family=Roboto');

/*Set fonts*/
#q66 label {
  font-size: 14px !important;
  font-family: "Roboto", sans-serif ;
}

Is this the correct approach?  Am I going to going to have to specify "cf.field" and all the ids for every field in order to update the label and field fonts to Roboto across the whole form?

Thanks,

Mike

0 0

Replies

replied on January 14, 2019

You can change the font to the entire body element of the form this way:

body {
  font-family: Roboto, sans-serif;
}

 

1 0
replied on January 14, 2019 • Show version history

Hi Chris,

Thanks very much for that.  For some reason it didn't work in our environment but it cleared things up for me.  I had to use the following to get everything on the form to use the Roboto font (without the quotes around Roboto or "!important" everything stayed on Arial):

body {
  font-family:'Roboto', sans-serif!important;
}

label {
  font-family:'Roboto', sans-serif!important;
}

.action-btn.Submit {
  font-family:'Roboto', sans-serif!important;
}

Thanks!

Mike

1 0
replied on January 14, 2019

Nice!

0 0
replied on January 16, 2019

Okay, guys, what about just the custom html fields occasionally used for additional text?  I'm finding that they randomly change fonts and sizes on me, as I go in and tweak the wording, at times.  I'm building a new form right now and 3 html fields are all messed up.  I don't really want to have to go in and start them all over to clear out the issues.  Can I use a CSS line or javascript that would say something to force all custom html fields to use the same style font?

0 0
View 8 previous replies
replied on January 16, 2019 • Show version history

Maybe add class to the custom html fields. Then use CSS to assign the font size you want. Be sure to add "!important" at the end so that the setting supersedes all others.

.connieClass {font-family:'ConnieFont', sans-serif!important; }

 

1 0
replied on January 16, 2019

Thanks, Chris!  Okay... here's where I'm going to be really showing my ignorance (*sheepish look*).  I copied it over exactly as is for my first testing.  Unsuccessful.

I know you've plugged in "connie" just as a placeholder for what I should put in the CSS class under Advanced, but my first attempts are not working.  Sorry, I don't have enough experience to complete all the steps.  Is there something I'm missing? 

0 0
replied on January 16, 2019

make sure you add the .connieClass into the CSS on the 'CSS and JavaScript' tab. Also define what you want your font to be. Swap out what you want with 'ConnieFont'.

0 0
replied on January 16, 2019

Oh, javaScript.  That might be what I did wrong.  I put it under CSS.  Nope, didn't change anything.

Also, the font.  Change ConnieFont to ....?  sans-serif?  I was hoping since you had that in there I didn't need to.  Sorry I'm so unfamiliar with this.  :(

0 0
replied on January 16, 2019

Hi Connie,

A couple of things to check, on the HTML field's Advanced properties for the CSS class that you've taken the screenshot of above, that should have "connieClass" in it (not "connieFont" as per your screenshot).  The code that Chris provided needs to go in the CSS window (not the JavaScript one below it - Chris was referring to the "CSS and JavaScript" tab), and instead of "ConnieFont" in Chris's code, you want to have something like "Arial" or "Times New Roman" for the standard font styles - per my example, I was using an imported font "Roboto".

To use Chris's example re. the font, after adding "connieClass" into the CSS Class field property for your HTML field, your CSS script would then look something like:

.connieClass {font-family:'Arial', sans-serif!important; }

Hopefully this helps sort things for you.

Cheers,

Mike

1 0
replied on January 16, 2019

^took the words out of my mouth :) Thanks Mike

0 0
replied on January 16, 2019

No worries Chris, I'm never sure about timezones and whether people will be online or not so as it's the beginning of the day here I thought I may as well jump in and contribute.  :o)   Cheers!

1 0
replied on January 16, 2019

Thanks guys.  I so very much appreciate your help.  Unfortunately, it is still not working for me.  Is there something else involved?  I tried the "small" "normal" back and forth on these two test fields, as well, to ensure they were set the same, but no change after that either.

0 0
replied on January 16, 2019

Hi Connie,

I'm learning as I go here as well and I'm wondering if there's a different approach for HTML fields.  I can't do any testing at the moment, but if I get the chance I'll have a look on my test system and see if I can work out what the requirement is.

Cheers,

Mike

1 0
replied on January 17, 2019

Thanks, Mike.  I'll put out a new request on this to see if we can get some more input from others who may know what is missing.

1 0
replied on January 17, 2019

Good idea Connie, sorry I don't have the answer for you on this one.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...