Set font family for interactive editor in playground
The font family for the interactive editor in the playground is not specified. Therefore, it falls back to the default that CodeMirror sets, which is monospace
. This value produces variation across platforms. It's also inconsistent with the font used for the code comparisons later in the page.
Since the stylesheet for the site already loads the Source Code Pro font, the simplest solution is to set this font family on the interactive editor in the playground as well.
#editorCode .cm-scroller {
border-radius: 5px;
font-family: "Source Code Pro__subset", monospace;
}
Since this font family must be used more than once, I think it should be defined using the --monospace-font
CSS variable.
#editorCode .cm-scroller {
border-radius: 5px;
font-family: var(--monospace-font);
}