Meta Box

Different fonts in WYSIWYG field and Gutenberg editor

Support › General › Different fonts in WYSIWYG field and Gutenberg editor

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • July 25, 2024 at 9:36 AM #46004
    YumikomYumikom
    Participant

    Hi,

    I am building a block theme.
    It has made it easier to manage font settings and styles on the backend and frontend.

    In the WYSIWYG field of Metabox, it is displayed in the TinyMCE style, but the font is different from the Gutenberg editor part, which makes me feel uncomfortable.

    I would appreciate your advice if it is possible to adapt this to the block theme settings.

    July 25, 2024 at 10:15 PM #46010
    PeterPeter
    Moderator

    Hello Yumiko,

    Can you share some screenshots of the issue? I understand that the font in the WYSIWYG field value is different from the value that is rendered in the block editor area.

    July 26, 2024 at 9:09 AM #46012
    YumikomYumikom
    Participant

    Hi Peter,

    I have uploaded the images below.
    https://ibb.co/PmnHWxM

    The left image is displayed in sans-serif in the Gutenberg editor.
    The right image is displayed in WYSIWYG TinyMCE editor with serif.

    In theme.json, sans-serif is specified.

    July 27, 2024 at 7:12 AM #46023
    PeterPeter
    Moderator

    Hello,

    I see that is expected. In the field settings, the basic style will be displayed, as other fields like text, textarea ... When the value is output in the block editor area, the custom style is applied and show the custom font.

    July 30, 2024 at 8:56 AM #46050
    YumikomYumikom
    Participant

    Hi Peter,

    Yes, that is correct.

    So is it completely impossible to match the block editor and fonts to the theme.json settings?
    Do I need to copy the editor styles individually to get “WYSIWYG”?

    August 1, 2024 at 9:45 PM #46079
    PeterPeter
    Moderator

    Hello,

    The theme.json doesn't relate to the field settings. If you want to add your style to the field settings, you can try to use this action hook rwmb_enqueue_scripts to enqueue your style/script file. Following the documentation https://docs.metabox.io/actions/rwmb-enqueue-scripts/

    August 2, 2024 at 8:33 AM #46085
    YumikomYumikom
    Participant

    Hi Peter,

    Now that I understand your detailed advice, I will try with the enqueue function for the metabox field.

    Thanks and regards,
    Yumikom

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.