Skip Navigation

[Resolved] Change default fonts in WYSIWYG field in front-end Forms

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to allow Users to choose different fonts in WYSIWYG editors.

Solution: Activate the font select and font size fields in WYSIWYG editors using the following custom code:

// Enable font size and font family select fields in WYSIWYG editors
if ( ! function_exists( 'tssupp_add_mce_font_buttons' ) ) {
    function tssupp_add_mce_font_buttons( $buttons ) {
        array_unshift( $buttons, 'fontselect' ); // Add Font Select
        array_unshift( $buttons, 'fontsizeselect' ); // Add Font Size Select
        return $buttons;
    }
}
add_filter( 'mce_buttons_2', 'tssupp_add_mce_font_buttons' );

Relevant Documentation:
https://codex.wordpress.org/TinyMCE

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 3 replies, has 2 voices.

Last updated by Christian Cox 10 months, 1 week ago.

Assigned support staff: Christian Cox.

Author
Posts
#1926911

Tell us what you are trying to do?
I am using a few WYSIWYG fields in a front-end form. I need to be able to access the CSS used so as to be able to use different fonts.

How do I access the CSS used for the default WYSIWYG editor?

Is there any documentation that you are following?
searched the site, but I'm getting more confused

Is there a similar example that we can see?

What is the link to your site?
hidden link

#1927015
font-size-and-font-family.png

Hi, I'm not sure I understand exactly what you want to accomplish, but it sounds like you want to enable your Users to select from different fonts in the WYSIWYG editor area. In general, you can activate the font-family and font-size select fields in all WordPress WYSIWYG editors with some custom PHP like this:

// Enable font size and font family select fields in WYSIWYG editors
if ( ! function_exists( 'tssupp_add_mce_font_buttons' ) ) {
    function tssupp_add_mce_font_buttons( $buttons ) {
        array_unshift( $buttons, 'fontselect' ); // Add Font Select
        array_unshift( $buttons, 'fontsizeselect' ); // Add Font Size Select
        return $buttons;
    }
}
add_filter( 'mce_buttons_2', 'tssupp_add_mce_font_buttons' );

You can add this code in a child theme's functions.php file, or create a new custom snippet set to run everywhere in Toolset > Settings > Custom Code tab. This code will add two drop-down fields in each WYSIWYG editor like you see in the screenshot here.

Have I misunderstood what you want to accomplish?

#1927027

Many, many thanks, Christian.

This is even better than I had asked for. Thank you.

All I was expecting was to be able to change the default font to something else, but the client will be very impressed with this. ...So am I.

Thank you,

Doug
====

#1927029

Ok great, glad to help.