The default font sizes don't look good on my screen and I wanted to use a different font family. I chose Consolas because it was the default font for VS Code on Windows 10 and I have grown accustomed to it. I'll probably experiment with other fonts later.
I have very limited experience with CSS, so there might be a better way to do this. I just spent some time using Inspect Element to figure out the selectors.
The following code sets the font family and font size for the editor, including for code (block and inline), KaTeX math formulas, tables, and heading levels 1 through 6. It was written for Zettlr Version 3.1.1 with Berlin Theme and still works as of Version 3.4.1.
/* Editor Font */
div.cm-line {
font-family: 'Consolas', monospace;
font-size: 20px;
}
/* Code Block Font */
div.code.code-block-line.cm-line {
font-family: 'Consolas', monospace;
font-size: 20px;
}
/* Code Inline Font */
span.cm-list.cm-content-span.cm-monospace {
font-family: 'Consolas', monospace;
font-size: 20px;
}
/* KaTeX (Math) Font */
span.katex {
font-family: 'Consolas', monospace;
font-size: 20px;
}
/* Table Font */
span.cm-code-mark.cm-meta {
font-family: 'Consolas', monospace;
font-size: 20px;
}
/* Header Font Sizes */
span.cm-header-1.cm-content-span {
font-size: 32px;
}
span.cm-header-2.cm-content-span {
font-size: 30px;
}
span.cm-header-3.cm-content-span {
font-size: 28px;
}
span.cm-header-4.cm-content-span {
font-size: 26px;
}
span.cm-header-5.cm-content-span {
font-size: 24px;
}
span.cm-header-6.cm-content-span {
font-size: 22px;
}
I really wish font properties could be set in the preferences menu. The custom CSS example in the official Zettlr Docs does not work. I used Google search to find some more examples written by other users, but none of them worked either. While I have a working solution for now, it could break with any update, and then I'll have to spend more time fixing it.
