Fonts broken in Greek, Russian

[paulcpederson]

Looks like the updates to the font service removed certain characters in Greek and Russian:

http://esri.github.io/calcite-web/examples/i18n/

Messing around, this seems related to the content parameter set by @jonathantneal 's gist. I think that is missing the characters. @jonathantneal do you know if that parameter came from the font project in monotype, or did you form that somehow?

In Online, we actually use the unicode-range parameter to load additional characters for Cyrillic:

/* Cyrillic */
@font-face {
  font-family: "Avenir Next";
  font-weight: 300;
  font-style: normal;
  src: local("Avenir Next Light"),
       url("link_to_cyrillic_light_face.woff2") format("woff2"),
       url("link_to_cyrillic_light_face.woff") format("woff"),
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

So maybe we could add something like this and expand the content parameter for these languages.

[jonathantneal]

Yes, I think creating a second font specifying the unicode range is the right answer. Thank you for providing the unicode range. I’ll have to see how that could be translated to how Monotype/Typekit requires it.

[phpmaps]

@paulcpederson seeing this too in another project which uses calcite-bootstrap.

The issue appears closely coupled with font-weight settings, specifically styles with Avenir Next and font-weight settings of 100, 200, or 300. When these font settings are used various characters like π and μ will show up looking abnormal.

aka.

/* bad.. */
font-family: "Avenir Next";
font-weight: 300;

/* good.. */
font-family: "Avenir Next";
font-weight: 400;

Setting font-weight to 400 and above see to also work around the issue with Avenir Next.

[paulcpederson]

@phpmaps Are you on a Mac? In that case, what's probably happening is that all Macs have several weights of Avenir Next installed, but they are missing the 300 weight. So on your machine 400 appears to be working because it's using the local file (which includes Cyrillic characters). I could be wrong, but that's what I would guess is happening.

[phpmaps]

@paulcpederson - using both mac and windows. Setting font-weight to 400 seems to mitigate the problem on each device. If you have an OS that is problematic, let me know as I'd be interested to see how π and μ get rendered with this font-weight workaround.

[paulcpederson]

@phpmaps that is super interesting. Looking into this a bit further and I think you may be right, I will investigate if this is related to the specific weight.

[phpmaps]

@paulcpederson - it's not a silver bullet. while FF looks better with this fix. chrome now has a slight visual miss-match in font-weight when font-weight:400 is used. Now considering detecting locale and swapping out to a different but similar font family.

[paulcpederson]

@phpmaps thanks for investigating. I am thinking this is due to how we pull in the fonts from the new font provider. I think your backup plan will work until we can solve this at the framework level.

If this is for a product and not just marketing pages, our license allows self hosting of font files (in certain cases), so that is another option to try out. Send me an email if you want to go down that road.

[phpmaps]

@paulcpederson @mitc7862 - thanks, do keep me in the loop. Avenir Next also displays abnormal with some Vietnamese characters. The Vietnamese issue I am not as familiar with, however I do know we dropped Anenir Next support for this language and would explore self hosting if we can get patched font files.

[paulcpederson]

Vietnamese is set to render in verdana, I think currently. If you set lang="vi" on the html tag, it will all render in Verdana.