Support » Plugin: TinyMCE Advanced » How to Change ‘H’ Font Size Inputs on Editor?

  • Resolved HisKingdomProphecy

    (@hiskingdomprophecy)


    Hi Folks,
    I use TinyMCE and Classic Editor and a default post font – on editor – of 12pt. to suit page dimensions.
    Prior to WP-5 I had H1=24pt, H2=18pt, H3=14pt & H4=12pt scaled input from the editor.
    After WP-5 the text editor input defaults are about H1=42pt, H2=32pt, H3=26pn & H4=20pt.
    I have set the CSS for posts to reflect my desired Header font sizes, so the published output is correct and as desired, however the Editor-Visual window is not close to wysiwyg.
    How can I have the editor H1-H4 header to apply new defaults and input the desired H font sizes to the Editor-Visual window?
    I have been searching for this for a while, but all the available advice on changing editor fonts is pre-WP5 and Gutenberg and not appropriate.
    Regards and thanks, Angus

Viewing 6 replies - 1 through 6 (of 6 total)
  • Correction: The above should read:

    “After WP-5 the text editor input defaults are H1=32pt, H2=24pt, H3=20pt, H4=15pt & H5=14pt.”

    Plugin Author Andrew Ozz

    (@azaozz)

    The editor only adds the <h1>, <h2>, <h3>, etc. tags, the font size depends on the theme’s CSS.

    chumbya

    (@chumbya)

    @hiskingdomprophecy
    Sorry trying to reopen this thread.

    Yours is exactly what I am searching for, i.e. the Headings’font size displaying in editor itself(published is OK). I tried to edit editor-style.css on the section of h1 or h2 … but nothing changed in editor if make a new post/page. Do I need to restart the server?

    The hurdle is I don’t like the Gutenberg floating block editor, came back with Classic Editor. Changing in theme’s editor-style.css only affects on visual/block editor, e.g. on the H font size, but it doesn’t change if I use Classic Editor. Maybe need to dig in deeper somewhere…

    Thanks!

    HisKingdomProphecy

    (@hiskingdomprophecy)

    @chumbya

    Thanks. I never solved the issue.

    My text < H > Header sizes are correct for site users, but for author or admin. on post/page edit page they are rendered huge.

    I use ‘Preview’ to check what I am doing and then check on my phone once published to make sure it is looking good.

    Regarding Gutenberg and blocks – since I use ‘indents’ a whole lot, I have chosen to stay with Classic Editor. Blocks are just too slow and troublesome for the look i want.

    Hope you find a solution!
    Regards,
    Angus

    chumbya

    (@chumbya)

    @hiskingdomprophecy I found the solution and put it here:

    Now I am using block editor and classic menu (hybrid), I really like it, because the menu always follow my writing( don’t need to scroll up and click menu) , and my previous plugin all working. and in fact, this combination will me more concentrate on writing.

    For the heading font size in Editor is to change editor-blocks.css:

    
    .edit-post-visual-editor .editor-block-list__block h2 {
    font-size: 24px; /*24px = 20pt?*/
    }
    
    .edit-post-visual-editor .editor-block-list__block h3 {
    font-size: 18px; /*20,18px = 14pt*/
    }
    
    .edit-post-visual-editor .editor-block-list__block h4 {
    font-size: 16px; /* 16px = 12pt */
    }
    
    .edit-post-visual-editor .editor-block-list__block h5 {
    font-size: 13px;
    }
    
    .edit-post-visual-editor .editor-block-list__block h6 {
    font-size: 11px;
    }

    I was a bit resistant to Gutenburg, but now I know: Always need to learn new things and get the best of it. :-)… Stay hungry, stay foolish…

    • This reply was modified 8 months ago by chumbya.
    HisKingdomProphecy

    (@hiskingdomprophecy)

    @chumbya

    Thank you. I tried changes but it seems the Theme .css file is over ruling them, so will fix that when I get some time.

    I appreciate your comments on hybrid editing. I had stated on that path a couple of weeks ago but have been too busy to pursue it.

    Since my content is all copy-and-paste from Word and other documents and is often quite long, so far the blocks seem a tad pointless….. but we’ll see how I learn. It it speeds things up – for sure I will change!

    Regards and thanks,
    Angus

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to Change ‘H’ Font Size Inputs on Editor?’ is closed to new replies.