Possible to specify a monospace font for a textarea field?

The CMS Questions
1

Is it possible to configure the textarea field to use a monospace font?

I wouldn’t need this to be a custom typeface, just whichever monospace font the panel is already using.

This is my use case: I’m adding a “Custom CSS” field to my page for adding ad-hoc styles, and the code looks a bit wrong in a proportional-width font.

Thanks!

2

If you give your field a special name, e.g. codefield, you should be able to select it via its name attribute in a custom stylesheet.

3

Thank you @texnixe, I can certainly do that. I was hoping there might be a way to achieve this without a custom stylesheet, but this will definitely do for now. Thanks again.

4

@sambaldwin No, there is no field configuration option, maybe you want to create an issue for this in the ideas repo.

5

@texnixe issue created, thanks!

6

I’ve been using the open source CMU Typewriter panel-wide for version 2 and 3 and it works so well that at this point it just feels like THE kirby font to me. https://fontlibrary.org/en/font/cmu-typewriter
http://cm-unicode.sourceforge.net

@font-face {
  font-family: 'CMU Typewriter Text';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/CMUTypewriter-Regular.ttf) format("ttf"), url(../fonts/CMUTypewriter-Regular.woff) format("woff"); }
@font-face {
  font-family: 'CMU Typewriter Text';
  font-style: normal;
  font-weight: 600;
  src: url(../fonts/CMUTypewriter-Bold.ttf) format("ttf"), url(../fonts/CMUTypewriter-Bold.woff) format("woff"); }
@font-face {
  font-family: 'CMU Typewriter Text';
  font-style: italic;
  font-weight: 400;
  src: url(../fonts/CMUTypewriter-Italic.ttf) format("ttf"), url(../fonts/CMUTypewriter-Italic.woff) format("woff"); }
* {
  font-size: 100%;
  font-family: "CMU Typewriter Text", "Apple LiGothic Medium", "Microsoft JhengHei UI", "Helvetica Neue", Arial, sans-serif; }
1 Like
7

The markdown field comes with a monospace option, btw.

8

Good to know, thanks!

9

In Kirby 3.2.0, the textarea field will get a font: monospace property.