3

On a new Dell laptop (Windows 10 and Google Chrome - v46.0.2490.80 m) our website shows "X" instead of "〉", I have tried to replace it with unicode value (:before {content:'\232A';}) but that didn't help either. We are using Web fonts so I assume corrupt fonts problem can be ruled out, it displays correctly on Edge and IE 11 on the same laptop. It is just Google Chrome who is not displaying it correctly.

jsfiddle as well as inline code is as follow

body {
  font-family: "Fjalla One", "Trebuchet MS", sans-serif;
}
.right-angle-bracket {
  font-size: 18px;
}
.right-angle-bracket:before {
  content: "〉";
}
.right-angle-bracket-rotate90 {
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.overview-findoutmore .right-angle-bracket {
  position: relative;
  right: -29px;
  top: 3px;
  width: 30px;
  height: 30px;
}
<link href='https://fonts.googleapis.com/css?family=PT+Serif|Fjalla+One|Open+Sans:400italic,600italic,300,400,300italic' rel='stylesheet' type='text/css'>

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' rel='stylesheet' type='text/css'>

<br />
<div class="row">
  <div class="col-xs-12 overview-findoutmore">FIND OUT MORE
    <div class="right-angle-bracket right-angle-bracket-rotate90"></div>
  </div>
</div>

Below is the screen shot of how it appears

X instead of 〉

And below is how it was supposed to be (same Chrome version but on another PC)

Supposed to be

Using image is not an option as it is used in multiple places with rotation as well as different sizes. Is there any way I can trouble shoot or fix this issue.

Update 1: By the way this is how it appears on Unicode converter page enter image description here

Update 2: So using FontForge I checked "Fjalla One" and bunch of other fonts and did notice that this unicode char is not there (refer image below) but what puzzles me is that why is it working on all other PCs, I would assume if that is the case then it should appear as "X" everywhere else too. FontForge

I have gone thru below links

Other references

Community
  • 1
  • 1
ndd
  • 3,051
  • 4
  • 25
  • 40
  • Can you confirm that the webfont is loading correctly in Google Chrome? – user2959229 Nov 04 '15 at 13:29
  • Yes I can, I am using [WhatFont](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?utm_source=chrome-ntp-icon) to verify and it does show the fonts loaded, I have also checked Developer tools console and there are no errors. Beside entire website uses that font so if it was font problem then I can easily tell :) – ndd Nov 04 '15 at 13:32
  • Can you create a piece of example code, preferably in a snippet here in the question, that demonstrates the issue? (Or if you can't get the snippet working, a link to your website would be nice.) – Mr Lister Nov 04 '15 at 13:33
  • This might help too - http://superuser.com/questions/324006/why-does-chrome-on-windows-7-not-show-certain-unicode-characters-to-me – user2959229 Nov 04 '15 at 13:34
  • so *what font* are You using? – Bogdan Kuštan Nov 04 '15 at 13:44
  • We are using Fjalla One, I am working on jsFiddle will update question soon. – ndd Nov 04 '15 at 13:48

1 Answers1

0

The embedded font Fjalla One does not include a glyph for U+232A so you are relying on whatever fonts are installed on the client (and whether the browser can pull the right fonts into its fallback stack). It's odd that on that one machine U+232A looks like an X, but ultimately it's not a well-supported character so probably best not relied upon.

You could edit the font to add the character you want or, probably best, just use an SVG shape.

bobince
  • 528,062
  • 107
  • 651
  • 834
  • I think if it was the Fjalla font issue then the same problem should exhibit on Edge or IE on the same PC. Also based on [Why does Chrome on Windows 7 not show certain Unicode characters to me?](http://superuser.com/questions/324006/why-does-chrome-on-windows-7-not-show-certain-unicode-characters-to-me) we also tried to use different font and that didn't solve the problem. – ndd Nov 05 '15 at 14:57
  • You need to use a font which supports the character you want to use. If you don't then you are relying on fallback rendering. The set of fallback fonts a browser will use varies from browser to browser and machine to machine, which is why the results are inconsistent. – bobince Nov 11 '15 at 14:35