Giters

suren-atoyan / monaco-react

Monaco Editor for React - use the monaco-editor in any React application without needing to use webpack (or rollup/parcel/etc) configuration files / plugins

Home Page:https://monaco-react.surenatoyan.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Custom fonts not working

casualdevvv opened this issue · comments

commented

Bug Description:
I am encountering issues when attempting to integrate a custom font face. The font displays incorrectly, and the text within the editor has irregular spacing, which look like whitespace characters but is the text inside the editor.

Steps to Reproduce:

  1. Add the custom font face into the CSS.
  2. Assign the fontFamily to the options props, for example: fontFamily: 'Editor'.

Expected Behavior:
Expecting the editor font to change to the selected custom font.

Screenshots:
Screenshot 1
Screenshot 2
Screenshot 3
Screenshot 4

Desktop Details:

  • OS: Windows
  • Browser: Chrome
  • Version: 126

Editor Snippet

<Editor height="calc(100vh - 8rem)" defaultLanguage="lua" defaultValue='print("Hello, World!")' theme='hw-novo' options={{ fontSize: 18, minimap: { enabled: false }, smoothScrolling: true, cursorBlinking: "smooth", renderLineHighlight: 'all', fontFamily: 'Editor'}}/>
commented

@casualdevvv could you please try this?

commented

@suren-atoyan That did fix the spacing issue
image
But it still isn't able to use the font, it gets replaced by some weird default font
Here is what the font is supposed to look like
image

commented

Can you try that font somewhere else in your application? let's see if it's related to monaco or not.

commented

Can you try that font somewhere else in your application? let's see if it's related to monaco or not.
Turns out the font was probably legitimately broken or something, I redownloaded it and all went well! Thank you for all of the fixes!
image