Custom font issues in admin-container CSS/HTML editor

Contribute Feature

AI-generated summary

Custom font issues in admin-container CSS/HTML editor

User Joe_Fedric is experiencing a spacing problem with custom fonts in the .admin-container element. Despite modifying the letter-spacing attribute, the issue persists. Falco suggests that the editor may expect a mono-spaced font, which is why custom fonts are causing the issue.

Mittineague proposes that the !important flag might be causing the problem, but Joe_Fedric finds that removing it doesn’t make a difference. However, Falco suggests using a mono-spaced font as a solution, which Joe_Fedric implements by using a monospace flavor of Roboto and adding !important to force the editor to use the font.

The solution is to use a mono-spaced font, such as Roboto Mono, with the following CSS code:

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

This resolves the cursor placement issue and allows the use of custom fonts in the .admin-container element.

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

Screen Shot 2016-12-08 at 4.22.44 PM.png270×137 10.4 KB

Expected behavior

Screen Shot 2016-12-08 at 4.22.52 PM.png302×132 11.6 KB

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 Mi Piace
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 Mi Piace
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 Mi Piace
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 Mi Piace