Linux – Why do some characters show as squares in Chrome

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.