Question

Changing fonts on Forms

Forms Version 10

Updated January 28, 2019

asked on January 25, 2019

I have been asked to make a form using any of these three fonts (all field inputs, all labels, all section headers, etc.):

Abril Text
Franklin Gothic Book
Georgia

I have been able to get a test on an html custom field to change to Abril Text but not other parts of the form:

WORKS - YES: .cf-custom {font-family: "Abril Text";}
WORKS - NO: .cf-section-header h2 {font-family: "Abril Text";}

On another post: https://answers.laserfiche.com/questions/153896/How-to-add-a-nontheme-font-across-a-whole-form#154068

What worked for him didn't work for me, or was I missing I part I should have done first?:

On another post: https://answers.laserfiche.com/questions/118729/Forms-theme-selection-limited-to-5-fonts

Again, good information, but the fonts I need could not be found on the site he suggested, so his suggestion wouldn't work for me.

0 0

Answer

SELECTED ANSWER

replied on January 28, 2019

Did you copy the CSS exactly from the first post that you reference? If so, that's likely part of the problem.

You need to specify the font that you are looking for in a comma delimited list in the order of priority.

body {
  font-family:'Abril Text', 'Franklin Gothic Book', 'Georgia', sans-serif !important;
}

.cf-section-header h2 {
  font-family:'Abril Text', 'Franklin Gothic Book', 'Georgia', sans-serif !important;
}

In this case I had to add cf-section-header separately since it didn't seem to pick up the font from the body. You might have to apply the fonts other elements in your particular form.

You'll also have to use the technique in your second link to bring in Abril from somewhere. I recommend that you download it and host it locally.

1 0

replied on January 28, 2019

Thanks, Devin!

This combination is now working:

To get this font showing up in Georgia:

Funny how different combinations of things may or may not work. For instance, trying to follow the new format for the input, which worked for the body and section headers, didn't work for the input. I looked more closely at your example and then removed the .cf- beginning part and then the input line worked!

Thanks, again!

0 0

Replies

replied on January 28, 2019

QUESTION: Devin, in your example, you show all three fonts in each of the code lines. How could that work? So... you mention "in order of priority". So... you're saying it will try the first font, then the next, then the next. Okay then. I didn't use that because I did not get consistent results. For instance, the Abril Text worked in the html custom fields, but not in the section headers.

QUESTION: When using the Body instruction, what is it targeting for the change? I did not get anything changing when I used just that one. I had to use the header/label/input separate pieces. Is there anything I'm missing? Oh, I see one: The small print of instructions below or above each field. How do I target those?

0 0

replied on January 28, 2019 • Show version history

Yes, it will try each font, and the first one it can find either on the local machine, or pull in from an import will be used.

Normally, applying a font to the body tag will apply to all elements unless it's being overridden by more specific styles. That's the reason for sometimes needing to explicitly define a style for a named element or class.

0 0

You are not allowed to follow up in this post.

Question

Question

Changing fonts on Forms

Answer

Replies

Sign in to reply to this post.