[react] Editors use `fontFamily: '"Fira Code"'` with no fallback
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
- react, typescript
- Domain
- developer-experience, frontend
Research direction
Start by reading createEditor in @graphiql/react and comparing its editor font setting with the font declarations in graphiql/style.css and @graphiql/react/style.css; issue #4058 gives context on the per-package stylesheets. Check how Monaco's default font is set in tests or examples. Done when editors using the per-package stylesheet display a monospace fallback without requiring Fira Code to be installed, or the font can be configured.
Written by the indexing model from the issue text.
Description
createEditor in @graphiql/react 1.0.2 sets fontFamily: '"Fira Code"' for every Monaco editor, with no fallback. The Fira Code @font-face only ships in graphiql/style.css; @graphiql/react/style.css has none.
So apps that import the per-package stylesheets (to skip the ~500KB of inlined fonts, as discussed in #4058) and don't load Fira Code themselves get the browser's default font in the editors, usually a serif one, unless Fira Code happens to be installed locally.
Could the default include a fallback (e.g. "Fira Code", ui-monospace, monospace, or var(--font-family-mono)), or be configurable? For now we set Monaco's default font on the editors after they're created.
- Dominant language
- TypeScript
- Stars
- 16.9k
- Forks
- 1.9k
- Avg merge
- 14h 1m
- Merged PRs (30d)
- 81
Getting set up
- No Dockerfile or Docker Compose file
- No pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from graphql/graphiql
-
Difficulty 1/5 Under an hour Newbie friendliness 88/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 83/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 77/100
Maintainers usually reply within 1 day
-
[graphiql] Variables editor flags a non-null variable with a default value as missingPossibly taken @khangb2306668 claimed this 2 days ago. Open
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
graphql/graphiql#4762 · 1 comment · 1 reaction ·
Maintainers usually reply within 1 day
-
[lsp-server] 🐞 documents scan does not skip node_modules, slow startup in monoreposPossibly taken @shubhamrai9122-creator claimed this 32 days ago. Open
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
Maintainers usually reply within 1 day
All issues in graphql/graphiql
Similar issues
-
Add "append" and "prepend" slots for vue-vuetify extended renderersPossibly taken @simeyc claimed this today. Open
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
eclipsesource/jsonforms#2668 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
Maintainers usually reply within 1 day
-
README の通知条件を実際の判定処理に合わせるPossibly taken @unhappychoice claimed this today. Openfactory:in-progress priority:medium
Difficulty 1/5 Under an hour Newbie friendliness 90/100
unhappychoice/oss-issue-opener#395 · 1 comment ·
Maintainers usually reply within 1 day
-
bug Website
Difficulty 2/5 1-3 hours Newbie friendliness 77/100
OWASP/OWASP-Hunting#88 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
Maintainers usually reply within 1 day