Why do some characters show as squares in Chrome?

Question

For example in the dev tools I get something like:

Some of these squares are at the end of lines, initially I thought they were carriage returns but it turns out they aren't.

Also, squares appear after = or > in many places where there is no newline, and looking at the file in a hex editor shows that there isn't any character at all between = and " (e.g. id=" is showing as id=? ")

This also turns up very occasionally in web pages, for example I saw:

I copied that sentence, looked at it in a hex editor, and again there is no character between e and :. Nothing shows up in the source code either.

I have never seen this before, and its only since I re-installed arch a few days ago.

Chrome is: Version 19.0.1084.15 dev
Arch is: Kernel 3.3.1-1-ARCH, x86_64

locale.gen has en_GB locales uncommented (both UTF-8 and ISO-8859-1). The encoding in chrome defaults to ISO-8859-1, but switching it to UTF-8 makes no difference.

This is the html file I was using: test.html

A fix would be fantastic, an explanation would be great, confirming that this is (or isn't) just a problem with my setup would also be good.

Edit: After investigating fonts, I found that in both cases it was trying to use arial, which in arch is part of the ttf-ms-fonts package. Installing that resulted in the font changing, but the squares remained (although a different shape). In both cases the font does not adhere to the default fonts for the system.

Answer 1

This fixed the problem for me. Install the dejavu fonts.

sudo pacman -S ttf-dejavu

Answer 2

There's a better way to determine what font you're missing instead of blindly installing font packages.

For example I did the following to resolve missing fonts:

1. I received an email with two unknown Unicode characters (codepoints: U+1F44B, U+1F3FC)
2. Paste them here: https://www.fontspace.com/unicode/analyzer#e=8J-Ri_Cfj7w
3. Review the results which will show you fonts that have those emojis/characters
4. Install only the needed font packages, for me pacman -S noto-fonts-emoji worked.
5. Rebuild font cache fc-cache -vf
6. Restart Chrome/Chromium

Alternatively you can lookup the Unicode name to aide in Google searches looking for fonts:

$ echo -e 👋🏼 | python -c 'import unicodedata, sys; s=sys.stdin.read().rstrip(); print([{ascii(c): unicodedata.name(c)} for c in s])'
[{"'\\U0001f44b'": 'WAVING HAND SIGN'}, {"'\\U0001f3fc'": 'EMOJI MODIFIER FITZPATRICK TYPE-3'}]

You can also can let Python read from stdin. To do that run the script without echo ... |, copy-paste the unknown Unicode character, hit enter and CTRL-D to close stdin, and python will return the result.

Answer 3

It's standard to print the Unicode replacement character in place of a character which does not exist in the current font.

A possible fix is simply to change the default font of either your OS (if the browser inherits the OS settings) or the browser. For example, my Firefox 11.0 on Ubuntu 11.10 is using the "serif" font (which might be a synonym for FreeSerif), which seems to support a lot of Unicode characters.

PS: The images seem to have disappeared.

Answer 4

installing the noto font from google, did it for me.

yay -S noto-fonts

Now, reload the font cache:

fc-cache -vf

Answer 5

I was having the same issue. This page, for example, was particularly unreadable, with squares appearing all throughout the text of the page. I was able to fix it by renaming all the arial*.ttf files in /usr/share/fonts/truetype/msttcorefonts to backup filenames and then setting Chrome's default sans-serif font to Droid Sans. I can't use Arial fonts at all now, but at least the pages look right.

Answer 6

I had the same problem. Using the past posts as a guide, I downloaded and installed the Font Changer Chrome extension. Using FC to change to Arial fixed the problem. Other fonts may also work, but I haven't tried them yet.

Answer 7

I just installed all Noto Fonts packages. That should cover almost all Unicode characters that you could encounter on the internet.

sudo pacman -S noto-fonts noto-fonts-extra noto-fonts-cjk noto-fonts-emoji
# Note: It could take some time to download all the packages

Restart your browser / application / GUI / Desktop Environment / Computer / whatever to make it work. You could also do fc-cache -vf just in case.

To save space / bandwith / time, you can just install noto-fonts, the rest is optional, but increases coverage:

• noto-fonts-extra is for additional styles like condensed, semi-bold and extra-light.
• noto-fonts-cjk is for Chinese, Japanese, and Korean languages.
• noto-fonts-emoji is for Emojis.

More about Noto:

Noto is a collection of high-quality fonts with multiple weights and widths in sans, serif, mono, and other styles. The Noto fonts are perfect for harmonious, aesthetic, and typographically correct global communication, in more than 1,000 languages and over 150 writing systems.

[...]

Noto includes fonts for nearly all of the world's writing systems (scripts): from Latin, Chinese, Arabic, Hebrew, and all Indic scripts, to Egyptian hieroglyphs and emoji.

Source: https://fonts.google.com/noto

Noto’s goal is to provide a beautiful reading experience for all languages. It is a free, professionally-designed, open-source collection of fonts with a harmonious look and feel in multiple weights and styles. All Noto fonts are published under the SIL Open Font License (OFL) v1.1, which allows you to copy, modify, and redistribute them if you need to.

Source: https://github.com/notofonts/noto-fonts#noto-fonts

More context:

Many widely used open source fonts (like GNU Unifont, GNU FreeFont, Open Sans and DejaVu) don't support characters of all languages, especially Asian. Though if you don't need Asian characters, DejaVu (package ttf-dejavu) is still a good choice.

The Arch Wiki also recommends Noto for displaying Asian characters: https://wiki.archlinux.org/title/Fonts#Pan-CJK

After installing the Noto packages, applications that use a different font which doesn't support a certain character, should use a Noto as a fallback for those characters. That is, if you use Fontconfig on your system, which most Linux Distributions, including Arch, do:

Fontconfig automatically chooses a font that matches the current requirement. That is to say, if one is looking at a window containing English and Chinese for example, it will switch to another font for the Chinese text if the default one does not support it.

Source: https://wiki.archlinux.org/title/Fonts#Fallback_font_order