Some letters misrendered in Chrome (missing tittle/crossbar on letter 't')

Question

Recently I've started noticing odd text rendering problems on Chrome. The main one being the letters 't' and 'e'. I don't know what caused the problem as I don't remember updating Chrome or anything else when I started seeing it. I'll use a the word 'Sticker' as an example: when it happens, the word Sticker looks like this:

 100% zoomed, misrendered 't'

The t in that image is missing it's crossbar and now looks like a lowercase 'L'. Confusing to read. Now if I zoom in to 110%, the word sticker now looks like this:

 110% zoomed, misrendered 'e'

The 't' looks better but now the 'e' is now missing it's horizontal line so it looks like a 'c'!

After some brief testing, the same thing doesn't happen in Firefox. However, opening a slightly different page in Chrome (the text or it's CSS hasn't been modified), the letter seems fine:

Despite how the images look, the CSS for the word Sticker was identical in each one. This problem makes some texts very awkward to read.

One thing that may have happened is that I changed my ClearType settings around about the time this problem started, but it doesn't seem to be fixing when I re-adjust ClearType to a thicker setting.

Answer 1

I am assuming you are using Windows. It seems clear that your adjustments have to do with your ClearType adjustment. You will need to fiddle around with it to revert back to normal.

Step 1: Use the text tuner

1. Close Chrome.
2. Click the Start menu.
3. In the search box, type ClearType.
4. Click Adjust ClearType Text.
5. In the ClearType Text Tuner, check the box next to "Turn on ClearType."
6. Click Next, then complete the steps.
7. Click Finish.
8. Open Chrome ans see if the problem is fixed.

Step 2: Change your Windows appearance settings

If Step 1 doesn't work, try changing your Windows appearance settings.

1. Close Chrome.
2. Click the Start menu.
3. In the search box, type Appearance.
4. Click "Adjust the appearance and performance of Windows."
5. Next to "Smooth edges of screen fonts," uncheck the box.
6. Click Apply.
7. Open Chrome again.

Step 3: Disable GPU Accelerated Canvas 2D

If still having the problem, try this:

1. In Chrome, type about:flags in the URL bar
2. Look at the settings for GPU acceleration. Graphics Processing Units, or GPUs, have specialized hardware for shading that have enormous floating-point and vector computational power, way beyond what a general purpose CPU has. Applications like Photoshop and Chrome have started to take advantage of that by offloading certain types of work to the GPU. You can see the options in about:flags for that.
3. Find GPU Accelerated Canvas 2D and check if it is enabled. If so, you can try disabling it.
4. Press the button on the bottom of the page to restart Chrome.

Step 4: Update your video card drivers

If all else fails, you can try to update your video card drivers from your GPU manufacturer's website to see if it fixes the issue. It could accidentally solve the issue by resetting GPU settings in chrome on the backup when you update your drivers, something you can't do manually in Chrome.