Safari on iPad does not display foot ( ′ = \u2032 ) and inch characters ( ″ = \u2032 ) when using the Anago font.

As far as I understand, this font does not have the desired character, but desktop browsers display the missing characters in a standard font. On the iPad, the situation is different.

At the same time, I tried other missing characters in the font (replaced the Latin ace with Cyrillic асе ), and they were displayed correctly in the default font.

So what's the problem with these two characters?
How to make these characters appear in a standard font?

 <!doctype html> <meta charset=utf-8> <title>iOS Safari doesn't render feet and inches</title> <style> @font-face { font-family: "Anago"; src: url("Positype - Anago-Book.otf"); font-weight: 300; } body { font-family: Anago, sans-serif; font-weight: 300; font-size: 4em; } </style> <p>Just a test - latin</p> <p>Just а tеst - lаtin аnd сyrilliс</p> <p>5′ 9.7″</p> <p style="font-family: sans-serif">5′ 9.7″</p>

Desktop Chrome on Windows:

Chrome Screenshot

Desktop Safari on Mac:

Safari Screenshot

IPad Safari:

Screenshot from iPad

Other browsers on the iPad behave similarly.

PS: This question is in English.

  • It is unlikely, but you never know: what if you try to use the &Prime; ? - Marat Tanalin
  • @MaratTanalin, did not help. - Qwertiy ♦
  • Does the problem reproduce with other fonts where the same character is missing? This would help to locate the source of the problem: an incorrect font or a browser bug. - Marat Tanalin
  • @MaratTanalin, if you use <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet"> and the font Pacifico instead of Anago, then the problem is NOT reproduced. - Qwertiy ♦
  • @MaratTanalin, oh .. And it looks like this range is in Google font ... - Qwertiy ♦

1 answer 1

At the very beginning of your CSS file, add the following line:

 @charset "UTF-8";
  • Um, I will check, but: 1. There is a style tag, not a css-file. 2. Why does the css-file encoding affect the use of fonts to html? - Qwertiy ♦