Custom font issues in admin-container CSS/HTML editor

Feature
1

I’m encountering a spacing problem with the .admin-container that is making it a bit rough editing my stuff.

Couldn’t find this in another thread, but here is my issue with custom fonts in the .admin-container element:

Example problem

Expected behavior

Essentially, anytime I use a font with a different font width, I see misalignment in the editor panel. Modifying letter-spacing attribute doesn’t help. Only setting the default font allows for correct cursor placement. The two screenshots above show the same exact cursor placement.

Anyway to use custom fonts in the admin-container? I can switch it if no, but I really prefer Roboto over the system font. :slight_smile:

1 Like
2

If you go directly to the /admin family of pages, or just refresh when there, you will see that custom styles are disabled there. And that’s why.

1 Like
3

Meh… I’d rather just force the font-family that works. When I refresh to ignore the custom style, most of my buttons, etc., are unclickable. I actually find that rather annoying, though it may be helpful for some specific custom CSS issues like *{display:none;} being added unintentionally or something silly like that.

This doesn’t specifically address the cursor placement issue in .admin-container, fwiw. Can I force the cursor to display in the correct location?

4

My guess is it’s the “!important” messing things up.

If you add a space before the “!” or remove those does the cursor then appear where it should?

5

I think aceeditor expects a mono-spaced font, try to add a exception for this container with a correct font.

1 Like
6

No, the !important flag doesn’t make a difference.

I think using a mono-spaced font is what I need to do. If I’m restricted to monospaced, then I’ll just use default fonts :slight_smile:

7

Found a monospace flavor of Roboto!

.ace_editor{ font-family:'Roboto Mono', monospace!important; }

I have discovered that !important is required to force the editor to use the font, otherwise it uses one of these fonts:

  1. Monaco
  2. Menlo
  3. Ubuntu Mono
  4. Consolas
  5. Source Code Pro

Thanks for the help everyone. It looks like the editor only plays nice with monospaced fonts. Dur.

5 Likes