Blurry text Electron

Question

I have has some issues with text and icon fonts looking blurry in an electron application. I have tested the same HTML page in Chrome and the text and icon font look much crisper.

After zooming the image I can see that Chrome is using subpixel rendering but Electron is only rendering in grayscale. I have tried using -webkit-font-smoothing: subpixel-antialiased; but it does not seem to change anything.

Chrome Browser version: 53.0.2785.116
Electron version (process.versions.electron): 1.4.1
Electron Chrome version (process.versions.chrome): 53.0.2785.113

What causes this and how should I fix it?

@EvanTrimboli No, all I am doing is setting the font and size. — user2248702, Sep 30 '16 at 02:33
Have you tried setting `-webkit-font-smoothing` to `aliased` to see if it makes any difference? Or even setting it to `none`? That would be a possible way to see if it affects anything at all. — 16patsle, Feb 16 '17 at 17:52
Hmm... Actually for me even the text gets blurry a little. I am not sure if thats because of the theme I am using. I am using light vs theme — Gary, Apr 21 '19 at 06:06

score 2 · Answer 1 · answered Mar 13 '18 at 09:14

2

Try to set:

backgroundColor: '#FFF'

in the BrowserWindow constructor options.

The corresponding issue on Electron's tracker

answered Mar 13 '18 at 09:14

Kirill Gribunin

181
11

1

It is also now in the [FAQ](https://github.com/electron/electron/blob/master/docs/faq.md#the-font-looks-blurry-what-is-this-and-what-can-i-do) – Nils Lindemann Jun 30 '19 at 09:59

Blurry text Electron

1 Answers1