Theme font settings not used for form fields

hi dear @jkml ,
Thanks for your inquiry.

I am checking the page and the text both in the header and the form inherits “Roboto” font family. Will you please mention which font family should be inherited by the form according to your settings?

Best Regards,
Mane

• This reply was modified 2 years, 8 months ago by Mane Grigoryan.

Hi Mane,
the global font family in my theme is “poppins”. Maybe “Roboto” is used alternatively in case “poppins” is not available? Both fonts are sans serif but all form fields and labels are using a serif font. Why?
I could add a screenshot to demonstrate the difference but don’t know how.

FYI: I’m also using OCEANWP and Elementor plugin. In Elementor I disabled default colors and font to ensure that theme settings are used. And it works properly except the form fields.

Best regards
Jana

Dear Jana,

As the form is inserted with Elementor widget it is inheriting the font from Elementor. Please, change the font from Elementor settings and check again.

Best Regards,
Mane

Dear Mane,
the form is integrated using its shortcode. In the header the font is correct but not in the section with form fields and labels. And it is not possible to select parts of the form in Elementor to change its font settings.
Therefore I checked Elementor’s general font settings and anywhere “Poppins” is used and the fall back is sans-serif. So the problem should be outside of Elementor.
I also checked OceanWP which is also involved but can’t find any related font settings as well.

In the source code of that page I found the following lines containing “font-family:Menlo,Consolas,monaco,monospace”. Where does it come from? I’m not using CSS. Could this be the reason for this misbehavior?

<style id='wp-block-library-theme-inline-css'>
.wp-block-audio figcaption{color:#555;font-size:13px;text-align:center}.is-dark-theme .wp-block-audio figcaption{color:hsla(0,0%,100%,.65)}.wp-block-code{border:1px solid #ccc;border-radius:4px;font-family:Menlo,Consolas,monaco,monospace;padding:.8em 1em}.wp-block-embed figcaption{color:#555;font-size:13px;text-align:center}.is-dark-theme .wp-block-embed figcaption{color:hsla(0,0%,100%,.65)}.blocks-gallery-caption{color:#555;font-size:13px;text-align:center}.is-dark-theme .blocks-gallery-caption{color:hsla(0,0%,100%,.65)}.wp-block-image figcaption{color:#555;font-size:13px;text-align:center}.is-dark-theme .wp-block-image figcaption{color:hsla(0,0%,100%,.65)}.wp-block-pullquote{border-top:4px solid;border-bottom:4px solid;margin-bottom:1.75em;color:currentColor}.wp-block-pullquote__citation,.wp-block-pullquote cite,.wp-block-pullquote footer{color:currentColor;text-transform:uppercase;font-size:.8125em;font-style:normal}.wp-block-quote{border-left:.25em solid;margin:0 0 1.75em;padding-left:1em}.wp-block-quote cite,.wp-block-quote footer{color:currentColor;font-size:.8125em;position:relative;font-style:normal}.wp-block-quote.has-text-align-right{border-left:none;border-right:.25em solid;padding-left:0;padding-right:1em}.wp-block-quote.has-text-align-center{border:none;padding-left:0}.wp-block-quote.is-large,.wp-block-quote.is-style-large,.wp-block-quote.is-style-plain{border:none}.wp-block-search .wp-block-search__label{font-weight:700}:where(.wp-block-group.has-background){padding:1.25em 2.375em}.wp-block-separator.has-css-opacity{opacity:.4}.wp-block-separator{border:none;border-bottom:2px solid;margin-left:auto;margin-right:auto}.wp-block-separator.has-alpha-channel-opacity{opacity:1}.wp-block-separator:not(.is-style-wide):not(.is-style-dots){width:100px}.wp-block-separator.has-background:not(.is-style-dots){border-bottom:none;height:1px}.wp-block-separator.has-background:not(.is-style-wide):not(.is-style-dots){height:2px}.wp-block-table thead{border-bottom:3px solid}.wp-block-table tfoot{border-top:3px solid}.wp-block-table td,.wp-block-table th{padding:.5em;border:1px solid;word-break:normal}.wp-block-table figcaption{color:#555;font-size:13px;text-align:center}.is-dark-theme .wp-block-table figcaption{color:hsla(0,0%,100%,.65)}.wp-block-video figcaption{color:#555;font-size:13px;text-align:center}.is-dark-theme .wp-block-video figcaption{color:hsla(0,0%,100%,.65)}.wp-block-template-part.has-background{padding:1.25em 2.375em;margin-top:0;margin-bottom:0}
</style>

Dear @jkml ,
Will you please resend the page where the form is published?

The page attached to your first message does not include the form anymore.

Best Regards,
Mane

Dear Mane,
meanwhile I switched the domain and now it is
https://i-go-ahead.info/anmeldung

I also tested the form in different browsers (Chrome and Edge) and both display the wrong font with serif for form fields and labels. In Chrome on my mobile phone this misbehavior not appears. Why???

Thank you very much and have a nice weekend
Jana

Dear Jana,
You can find the following sample of code under admin/controllers/elementorWidget.php:

protected function render() {
    $font_class = new \Elementor\Core\Schemes\Typography();
    $font = $font_class->get_scheme_value();
    $color_class = new \Elementor\Core\Schemes\Color();
    $color = $color_class->get_scheme();
    if ( isset($font[3]) && isset($font[3]["font_family"]) && isset($font[3]["font_weight"]) && isset($color[3]) && isset($color[3]["value"]) ) {
      echo '<style>.elementor-widget-container .fm-form-container, .elementor-widget-container .fm-form-container label, .elementor-widget-container .fm-form-container input, .elementor-widget-container .fm-form-container textarea, .elementor-widget-container .fm-form-container select, .elementor-widget-container .fm-form-container button, .elementor-widget-container .fm-form-container  .fm-message { font-family: ' . $font[3]["font_family"] . '; font-weight: ' . $font[3]["font_weight"] . '; color: ' . $color[3]["value"] . '}</style>';
    }
    $settings = $this->get_settings_for_display();

    echo WDFMInstance(self::PLUGIN)->fm_shortcode(array('id' => $settings['form_id']));
  }

That means that we are inheriting the font from Elementor. You can comment the segment of the code in IF condition. However the best solution is to change the settings from Elementor directly.

Best Regards,
Mane