Monaco is pixelated in web pages

Question

I installed Monaco font and it looks great in terminal:

but it looks ugly in the browsers:

How can I fix such a behavior? I would like to see the correct font in web pages too.

How are you getting it to show on web pages? Are you overriding the standard fonts? — Oli, Dec 05 '13 at 10:03
@Oli The CSS says that. For example the very this textarea (when writting a comment) have this rule for font-family: textarea { font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif } I guess you noticed the Monaco font that is placed before Lucida Console or monospace that look ok. — Ionică Bizău, Dec 05 '13 at 11:20

score 1 · Answer 1 · answered Feb 01 '14 at 16:35

1

I am so glad that this was fixed.

Here is the commit that fixed this: a new font.

It can be installed using the following command:

curl -kL https://raw.github.com/cstrap/monaco-font/master/install-font-ubuntu.sh | bash

answered Feb 01 '14 at 16:35

Ionică Bizău

9,503

score 1 · Accepted Answer · answered Apr 19 '15 at 16:34

Solution:

First create a file in .config/fontconfig/conf.d/ directory with 20-no-embedded.conf name.

Then put the below lines in the file to disable embedded bitmaps for all fonts.(If you don't want to disable for all fonts, but for some fonts, skip this to the next)

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <match target="font">
    <edit name="embeddedbitmap" mode="assign">
      <bool>false</bool>
    </edit>
  </match>
</fontconfig>

(Alternative) If you don't want to disable for all fonts, but only for a specific font, you should instead use these

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
    <match target="font">
        <test qual="any" name="family">
           <string>Monaco</string>
        </test>
        <edit name="embeddedbitmap">
            <bool>false</bool>
        </edit>
    </match>
</fontconfig>

Below is a picture after successfully enabling anti-aliasing for Monaco. Have fun!

Monaco problem solved image

If you want to know more, check out ArchLinux's fontconfig wiki page that helped me to solve this problem.

Seems like this is even better! Below is a picture after successfully enabling anti-aliasing for Monaco. Have fun! -- where is the screenshot? — Ionică Bizău, Apr 19 '15 at 17:55
Ah, right. But maybe you should include a window as well, because it's a little bit confusing. I thought it's a code block. :) — Ionică Bizău, Apr 20 '15 at 04:06

Monaco is pixelated in web pages

2 Answers2

Solution:

Linked