CODEWITHSUNDEEP
htmlcsstextfont-faceroboto
Patrick Heiloo
Patrick Heiloo

Reputation: 39

Strange squares in text on Chrome for Windows

We are having a strange issue on three custom made WordPress websites. There are squares randomly visible in the text. These squares are only visible in Chrome for Windows. The squares are visible at https://www.dakcheck.nl. I also made a screenshot of the issue. Do you have any idea what could cause this problem?

Upvotes: 1

Views: 5653

Answers (3)

seneca
seneca

Reputation: 1

I've been able to root out phantom characters like that using the HxD hexeditor. You'll see the regular text on the right, and the BinHex on the left. Whatever the phantom character is, use '20' to replace it, and you'll get a regular space without the box.

Upvotes: 0

tao
tao

Reputation: 90068

You seem to be using characters that are not contained in latin subset. You need to specify the additional subset containing the characters you are using when loading the font. In your example, you need to replace

https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,900,900italic,500,400italic,500italic,300,300italic

...with:

https://fonts.googleapis.com/css?family=Roboto:400,700,700italic,900,900italic,500,400italic,500italic,300,300italic&subset=latin,latin-ext

Note the &subset=latin,latin-ext suffix.

Important note: If the strange characters are not special letters pertaining to your language, the most probable cause is a difference in encoding between your saved files and the webpage. You need to make sure your IDE saves your (.php, .html, .css, .js, etc) files with the exact same encoding as the one declared in the <head> tag of your pages.
Best choice is, by far, UTF-8, but advise on what encoding you should use is out of scope here. The important thing is they have to match.

Additional note: I personally believe you should streamline the usage of fonts in your website and try to drastically limit the number of font weights and variants you are currently loading. You are currently loading 300, 400, 500, 700 and 900 weights in both normal and italic variants. You could probably do with only 400, 700 and 900 and some of them don't even need italic (if not used).
Also note you don't need to change font-weights in your current CSS to streamline font usage. If a font-weight is specified but not present, the browser will automatically use the closest match. For example, if you now have font-weight:500 on an element but only load 400 and 700 weights for the specified font, it will automatically use 400 instead of 500 on the element.

In web development, commonly used font-weights are:

  • thin (not valid value for font-weight property - define it inside a class definition) usually font-weight:200; - commonly used in conjunction with large font-sizes, to feature large and very thin (~1px) letters
  • normal (valid value for font-weight) usually translates to font-weight: 400;
  • bold (valid value for font-weight) usually translates to font-weight: 700;
  • extrabold (not valid value for font-weight - define it inside a class definition) usually font-weight:900; - commonly used for titles.

Upvotes: 4

myf
myf

Reputation: 11283

I think you will have to edit your content texts: what is present there are control characters, namely end of text control characters in places it is not supposed to be:

end of text straw control character

Ie navigating to https://www.dakcheck.nl/ and invoking

var t = document.getElementsByTagName('h1')[0].innerText;
t.charCodeAt(t.indexOf('met ')-1)

in the console yields 3.

It is probably caused by copy-pasting from some (desktop?) rich-text editor into WP, although I'd suppose WP editor should handle this.

Upvotes: 0

Related Questions