Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[Bug]: Editor always renders in JetBrains Mono regardless of the font setting

Open Beginner friendly
#38 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
76/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
css, rust
Domain
frontend

Research direction

Start in crates/app/src/editor.rs, especially editor_colors(), and trace how the font setting reaches the editor wrapper. Check style.css rules for .code-editor-highlight and .code-input, then compare the editor with the preview using each bundled font. Done means the editor font follows the selected setting while caret alignment remains consistent, or the mismatch is documented.

Written by the indexing model from the issue text.

Description

bug
What happened?

The code editor always renders the code in JetBrains Mono. Changing the Font setting updates the preview canvas and the export, but not the editor, so the editor and the output disagree. The repository documentation states that the editor mirrors the export.

Steps to reproduce
  1. Open the app.
  2. Change the Font select to "Fira Code" or "Cascadia Code".
  3. Compare the editor text with the preview canvas text. The editor stays in JetBrains Mono.
Expected behavior

The editor uses the same font (or an equivalent visual approximation) as the preview and the export, or the mismatch is documented.

Actual behavior

style.css hardcodes font-family: "JetBrains Mono", monospace for both .code-editor-highlight and .code-input (lines 499 and 515). The font setting only affects FontChoice::css_family() used by the canvas renderer.

Where did it go wrong?

UI controls / settings

Settings

Any non-default font.

Browser

Any.

CodeFrame version

0.7.0

Console output or extra context

Suggested fix: set a CSS custom property (for example --editor-font) on the .code-editor wrapper from the font signal, and use var(--editor-font) in both rules. The CodeEditor component already builds an inline style string in editor_colors() (crates/app/src/editor.rs:16-25), so the value can be added there.

Note: the editor uses measured font metrics for caret alignment, so all three bundled fonts should keep identical sizing behavior when switched.

Dominant language
Rust
Stars
1
Forks
0
Avg merge
1d 7h
Merged PRs (30d)
5

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from suradet-ps/codeframe

All issues in suradet-ps/codeframe

Similar issues

More Rust issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.