Fonts too small in the backend text editor

You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours

Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#112917 Fonts too small in the backend text editor

Posted in ‘Editor’

This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by Ryan on Wednesday, 01 February 2023 09:52 GMT

Thursday, 26 January 2023 01:03 GMT

Buldre

Hi,

I switched to JCE Pro from TinyMCE as my text editor, but the result is disappointing. The font in the text editor is way too small, and I don't know how to increase it. At the same time, there are disproportionately large spaces between the paragraphs. The separator for read more is far too thick and the headings are disproportionately large. At the same time as the font is too small, a lot of space in the editing window is wasted.

As of now, the text editor is unsuitable for daily editing of dozens of articles, each with a lot of text. How to fix this?

I am running Joomla 4.2.6 with Joomla's default admin template Atum. Shouldn't JCE for Joomla 4 work "out of the box" together with Joomla 4 and Atum? Please see the attached schreenshot.

Attachments

Thursday, 26 January 2023 10:11 GMT

Ryan

By default JCE will use the styles from the front-end template to style the editor content. Because some templates use multiple stylesheets for this purpose, it is not always possible to create a 100% accurate rendering of the content in the editor.

Which template are you using?

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Thursday, 26 January 2023 13:16 GMT

Buldre

I use JA Magz II as my template frontend. The situation is much the same there, big enough letters with TinyMCE, but not with JCE. And if I switch to Joomla's Cassiopeia, the letters become slightly larger with both Ja Magz II and Cassiopeia, but still with a big difference between the two text editors. Do I need some cusom.css?

Thursday, 26 January 2023 13:57 GMT

Ryan

For a quick fix, which will display the content in a similar way to the Tinymce editor, ie: using a standard set of styles not from the template, then in the Editor Global Configuration, set the Editor Styles option to Default. Alternatively, if you want to use the template's styles, but with modifications, you can create an editor.css file in the templates/ja_magz_ii/css folder and add the following:


@import url('template.css');

/* custom style overrides */
body {
    font-size: 13px;
}

p {
    margin: 0 0 10px;
}

and add other style overrides as required. JCE will automatically load this file for use in the editor content.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Edited by Ryan on 2023-01-26 13:58 GMT

Thursday, 26 January 2023 17:30 GMT

Buldre

The first alternative doesn't work at all. The second option works for me when I increase the font size with the code, from 13 to 15 or 16 pixels.

However, the preview in the text editor still has a small font size, and the font appears to have been changed to Times New Roman. It is not often that I use the preview, but can a change of the font size in the preview be done with a similar code in editor.css?

Thanks!

Edited by Buldre on 2023-01-26 17:33 GMT

Friday, 27 January 2023 09:32 GMT

Ryan

Please send me a login - https://www.joomlacontenteditor.net/contact/site-login

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Wednesday, 01 February 2023 09:52 GMT

Ryan

However, the preview in the text editor still has a small font size, and the font appears to have been changed to Times New Roman. It is not often that I use the preview, but can a change of the font size in the preview be done with a similar code in editor.css?

I have fixed this on your site. The editor.css file required an extra @import rule for the bootstrap.css file, eg:


@import url('bootstrap.css');
@import url('template.css');

/* custom style overrides */
body {
    font-size: 16px;
}

p {
    margin: 0 0 10px;
}

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.