1

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?

Patrick Heiloo
  • 39
  • 1
  • 4
  • Might not actually apply here, but worth reading and checking in any case: http://stackoverflow.com/questions/279170/utf-8-all-the-way-through – domsson Mar 20 '17 at 10:35

3 Answers3

4

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.
tao
  • 82,996
  • 16
  • 114
  • 150
  • Hi Andrei, thanks for this useful information, I really appreciate this :). Unfortunately it didn't solved the issue. I've replaced the Google font URL and also removed some unused font-weights. The squares are still visible on the website and in WordPress. Do I need to remove the squares manually or do you have another solution? – Patrick Heiloo Mar 20 '17 at 09:30
  • Did you also append `&subset=latin,latin-ext` to the font link, like I suggested? That's the actual answer. The rest is just a note. – tao Mar 20 '17 at 09:32
  • Yes I did. Here is the full code: `` – Patrick Heiloo Mar 20 '17 at 10:00
  • @PatrickHeiloo Since you are dutch, I automatically presumed some characters pertaining to your language are not displaying correctly. Are those squares ***not letters*** from your language which are supposed to render with some accents? – tao Mar 20 '17 at 10:04
  • No I only use normal letters without special characters. I made a screenshot of my code: [link](https://www.dakcheck.nl/squares.png) – Patrick Heiloo Mar 20 '17 at 10:09
  • Ok, please make sure your editor saves all files with UTF-8 encoding. Not UTF-16, not ISO-whatever..., nothing else. Difference in encoding from what you declare in `` and how you encode the files to disk is usually generating this. If this is the issue, you will probably also need to open, change encoding and save your `CSS` files too. – tao Mar 20 '17 at 10:11
  • @PatrickHeiloo Most probably, you are facing [`this issue`](https://groups.google.com/forum/#!topic/coda-users/M-4RBPRotWc). See the update to the answer. And here's [`how to convert`](https://docs.moodle.org/20/en/Converting_files_to_UTF-8) encoding. – tao Mar 20 '17 at 10:24
0

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.

myf
  • 9,874
  • 2
  • 37
  • 49
  • Thanks for commenting. All text is done via HTML, so it is plain text. Here is a screenshot: [link](https://www.dakcheck.nl/squares.png) – Patrick Heiloo Mar 20 '17 at 10:05
  • And have you typed those content text it there by hand or pasted from elsewhere? Anyway, I'd try to delete and write again `n m`in the heading, if it wipes the invisible straw content or not. – myf Mar 20 '17 at 10:27
0

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.

seneca
  • 1