Forgot the picture

It looks like Firefox is confused about that font, showing misspelling marks (squiggly underlines) positioned as though the letters were much wider. Is that supposed to be the "monospaced" font (all characters the same width)?

Thanks for you answer. How would I check if the font is monospaced?

Well, the blue letters are not monspaced, a monospaced font looks like a terminal display or Courier. Code display areas often use a monospaced font so that is why I suspect some strange font switcheroo issue there.

function nothing(){
  // do nothing
}

To see what font Firefox is using, you can try the Inspector. Here's how:

right-click the problem text > Inspect Element

Firefox should open a pane in the lower part of the tab that shows an HTML tree diagram highlighting the selected element. If it is a canvas, we may be at a dead end, but if it is another kind of element, you can change the panel on the right from Rules (or whatever is shown there) to Fonts. If the bar that shows Rules, Layout, etc. doesn't show Fonts, use the triangle at the right end to change the display.

To see what font(s) the page wants to use, click the Computed panel heading, and scroll down to font-family to see what is listed there.

See also:

• https://developer.mozilla.org/en-US/Tools/Page_Inspector/How_to/View_fonts

I haven't discovered the fonts tab yet. It shows that this part is using Liberation Sans Narrow.

EDIT: On my laptop firefox is using DejaVu Sans Mono

EDIT2: I copied the settings from my laptop and the overleaf editor is working properly now. Thanks for your help!

The screenshot shows a very small font with a width of 1px.

Hi there! I am having the same issue with overleaf on Arch as well. How exactly did you copy the settings from your laptop? I'd really appreciate the help, thank you!