W3C home > Mailing lists > Public > public-css-archive@w3.org > December 2018

Re: [csswg-drafts] [css-fonts] Propose adding lang as a font-face descriptor (#1744)

From: Kevin Hsieh via GitHub <sysbot+gh@w3.org>
Date: Sat, 01 Dec 2018 20:26:40 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-443455931-1543695998-sysbot+gh@w3.org>
I agree that the `:lang()` selector solution is compelling, but I see a couple potential issues with it. The most common use case is embedding some text from another language within a page that's mostly in one language. But in this use case, if we don't use the star selector, then font-family is computed on the element to which it's applied, so the following slight modification of @drott's example doesn't have the expected behavior in Firefox 63 or Chrome 70 ([Codepen link](https://codepen.io/anon/pen/zMepOY)):
<div lang="a" class="myclass">
  a (shows in cursive)
  <div lang="b">
    b (shows in sans-serif)
@font-face {
  font-family: Pacifico;
  src: url(//fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)

@font-face {
  font-family: Roboto;
  src: url(//fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2)

:root :lang(a) {
  --site-font-family: Pacifico;

:root :lang(b) {
  --site-font-family: Roboto;

.myclass {
  font-family: var(--site-font-family);
  font-size: 50px;
Also, I think using CSS custom properties as a surrogate for font family is a little hacky, but perhaps that's fine. To include both serif and sans-serif Noto CJK fonts in a page we would have to something like this:
@font-face { font-family: NotoSansTC; src: url(NotoSansTC-Light.otf); }
@font-face { font-family: NotoSansJP; src: url(NotoSansJP-Light.otf); }
:root :lang(zh) { --NotoSans-Light-font-family: NotoSansTC; }
:root :lang(ja) { --NotoSans-Light-font-family: NotoSansJP; }

@font-face { font-family: NotoSerifTC; src: url(NotoSerifTC-Light.otf); }
@font-face { font-family: NotoSerifJP; src: url(NotoSerifJP-Light.otf); }
:root :lang(zh) { --NotoSerif-Light-font-family: NotoSerifTC; }
:root :lang(ja) { --NotoSerif-Light-font-family: NotoSerifJP; }

.my-sans-text {
  font-family: var(--NotoSans-Light-font-family);
.my-serif-text {
  font-family: var(--NotoSerif-Light-font-family);

GitHub Notification of comment by kahsieh
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1744#issuecomment-443455931 using your GitHub account
Received on Saturday, 1 December 2018 20:26:41 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:40 UTC