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.

Kyle · Answer

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:

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

Manuel Schmitzberger · Answer

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

yay -S noto-fonts

Now, reload the font cache:

fc-cache -vf

Training Man · Answer

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.

Answered by Training Man on December 3, 2021

jfriedly · Answer

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.

Answered by jfriedly on December 3, 2021

Teaqu · Answer

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

sudo pacman -S ttf-dejavu

l0b0 · Answer

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.

Why do some characters show as squares in Chrome?

6 Answers

Add your own answers!

Ask a Question