How to change font attributes in Paypal Pro Form

#1

Pro Version, latest update as of 3/28/20. Same w/WP.
This has been bugging me for a while.
How do I change the font attributes in the Paypal Pro Form? Currently it looks like this:

49

It makes the whole thing look pretty hinky.

I’ve used the Chrome dev tools screen but can’t figure out what’s what there. I mean, I often can but not in this instance.

Thanks for any suggestions you might have.
Dani

#2

If the form is public provide a link and I will take a look and tell you what custom CSS to add to your theme / site (via plug-in) to vary the font.

#3

The text “Field Test Class: $65”

But this happens on any page I’ve set with a Paypal Pro Form.

Here’s what’s in the shortcode:
s2Member-Pro-PayPal-Form font-family=“Inter” size=“12px” level=“1” ccaps="" desc=“Field Test class: $65” ps=“paypal” lc="" cc=“USD” dg=“0” ns=“1” custom=“jackrabbitenglish.com” ta=“0” tp=“0” tt=“D” ra=“65” rp=“1” rt=“M” rr=“BN” rrt="" rra=“2” accept=“paypal,visa,mastercard,amex,discover,maestro,solo” accept_via_paypal=“paypal” coupon="" accept_coupons=“1” default_country_code="" captcha=“0” /]

On the page:

backside%20of%20field%20test%20signup%20page
backside of field test signup page.png721×431 28.3 KB

Thanks for any suggetions.

#4

Your s2member format parameters are being overridden by your theme and / or Gutenberg.

I never use s2member shortcode parameters to affect my s2 forms…I just add the CSS I want to style the forms into the theme’s custom page CSS field.

That is your only solution.

1 Like
#5

Tim, can you tell me what you’d put into the custom CSS field?

My first thought when I read your post was, “If the shortcode parameters are being overridden by the thteme, wouldn’t the font match the rest of the page, which displays the font that’s set by the theme?”

I’m confused about where the fontset is coming from because it’s not the font that’s defined by the theme (as far as I can tell, but I only know enough to be dangerous).

#6

You have the shortcode in teh Gutenberg shortcode block. That is a natural path for people to take but is not the optimal path from a styling perspective.

Put your shortcode in a “classic” block and you will have editor controls like you used to in the pre-gutenberg days.

See https://gogutenberg.com/blocks/classic/

#7

Hi Dani,

In your CSS, you could use the selector div.s2member-pro-stripe-form-description-div with the font-family style.

:slight_smile: