search

adobe / theblog

Apache License 2.0
7 stars 14 forks source link

Fonts: load a kit per language #664

Closed kptdobe closed 2 years ago

kptdobe commented 3 years ago

Requirement is to load a font kit depending on the window.blog.language property: different language, different kit (es: https://use.typekit.net/oln4yqj.css, pt: https://use.typekit.net/inq1xob.css, etc)...

This would be pretty straight forward when we'll be done with the Web Vitals optimisation (https://github.com/adobe/theblog/issues/663) since the font kit is loaded post LCP (see code below), i.e. the language is already computed and the font is loaded dynamically. We'll only need to setup a mapping between the language and the font(s) to load.

https://github.com/adobe/theblog/blob/3c2d30530b295c4703b68a41b0d8889eb4b6590c/scripts/common.js#L868-L883

The kits to load must taken from adobe.com.

cc @rofe

kptdobe commented 3 years ago

We need to get a kit properly configured with the Adobe Clean above, Adobe Clean Han K and Adobe Clean Han Japanese.

Interestingly, the 2 kits we use today do not provide Adobe Clean Han K and Adobe Clean Han Japanese which I think means that browser falls back to "a" default. In JP and in KO, the site should look as expected only on the Adobe's employees laptop where the font might be installed!!

@auniverseaway I do not know what to do with the content package you gave me. While I see the kits per locale, I cannot access them. Who should be talk to to get a clean kit ?

auniverseaway commented 3 years ago

@kptdobe for CJK, you will need to use the JS integration due to the quantity of glyfs. I can add all the other langs / glyfs and turn of dynamic subsetting, but you will still have CJK issues if you try to use the CSS integration.

auniverseaway commented 3 years ago

See: https://helpx.adobe.com/fonts/user-guide.html/fonts/using/embed-codes.ug.html#JavaScriptembedcode