Unicode font issues?

Stragus

This begun several days ago, but I'm seeing weird symbols for the little icons about feedback and such.

This is on my Android 6.0.1 device, Chrome browser:
http://www.bricksync.net/bo-font-android.png

On desktop, this is in Firefox (51.0.1, developer edition, Linux):
http://www.bricksync.net/bo-font-firefox.png

On desktop, this is in Chrome (57.0.2987.133, Linux):
http://www.bricksync.net/bo-font-chrome.png

So we can see the icons were replaced by Unicode symbols, which are missing from whatever font is being used on my Linux boxes... and they appear to map to Korean glyphs on Android, for some reason.

P.S. We used to be able to post images in the forum, with the HTML img tag, that was convenient...

JayB-SoCal

If the characters in the binary data are not unicode then they may not output properly. It's either that or the output from the web server is not printing out pages using UTF-8 (even though the charset on the page is set to UTF-8, the web server has to do its part as well). If neither of that works, then somehow the characters are UTF-16 or something else and being received/stored contrary to their encoding). For example, a database may store the encoding bits in the opposite order they are intended.

Stellar

It is also wrong on my phone (Android Chrome Dev) but it is fine in my desktop (W10 Chrome Versión 60.0.3112.113 (Build oficial) (64 bits) & just updated to Versión 61.0.3163.91 (Build oficial) (64 bits) and works fine too.)

Lawrence

@Stragus would you possibly mind seeing if you can open the console on firefox / chrome and see if there are any font loading related errors? Unfortunately I don't have a linux based device to test this out on.

Stragus

@Lawrence It's fixed, on both Android and Linux, thank you!

There's (now) nothing about font related errors in the web console.

Lawrence

Great, I was able to get the error to appear on non-Linux devices, I fixed it, but I don't really know how.

Stellar

@Lawrence Now it works on my phone but not in my desktop.

Here are the console errors:
Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
orders:1 Access to Font at 'https://css.brickowl.com/sites/default/themes/bs/fonts/fontawesome-webfont.woff?v=3.2.1' from origin 'https://www.brickowl.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.brickowl.com' is therefore not allowed access.
orders:1 Access to Font at 'https://css.brickowl.com/sites/default/themes/bs/fonts/MuseoSans_500-webfont.woff' from origin 'https://www.brickowl.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.brickowl.com' is therefore not allowed access.
orders:1 Access to Font at 'https://css.brickowl.com/sites/default/themes/bs/fonts/fontawesome-webfont.ttf?v=3.2.1' from origin 'https://www.brickowl.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.brickowl.com' is therefore not allowed access.
orders:1 Access to Font at 'https://css.brickowl.com/sites/default/themes/bs/fonts/MuseoSans_500-webfont.ttf' from origin 'https://www.brickowl.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.brickowl.com' is therefore not allowed access.
js-agent.newrelic.com/nr-1044.min.js Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

Lawrence

I'm thrown by that, the error is due to a header missing when the file is fetched. It's possible it's cached locally, maybe clearing the cache would help? Otherwise I'll have to think of something else. Also is there more to the error message in relation to the newrelic file?

Stellar

@Lawrence Yeah, problem solved, cache cleaned!

JayB-SoCal

@Lawrence, it appears it may be (or had been?) a cross-domain issue on the font loading. The site is being accessed at www.brickowl.com but the font is loaded from css.brickowl.com (which is maybe how you've specifically set up your CDN delivery). I would recommend that the path the CSS file loads the font be hard-coded to the www.brickowl.com host. Either that, or re-consider the host name the CSS is loaded from - at least the CSS that contains the fonts. You can split the CSS if needed, it won't affect CDN performance much if you deliver the fonts off the same host (you can always set long cache limits based on version which it appears you do with ?v=3.2.1) so it will only affect initial download/caching speed. Some browsers will complain about the issue, others may not. Eventually, all will.

Lawrence

It was a cross domain issue with the cross domain origin header not always being set, and with that missing header being cached. That's now been resolved.