local("<font_name>") not available although loaded from fontconfig

[Linkun Chen]

TL;DR: I am from Google Nest team, which is downstream of chromium project. I ran into this issue that some fonts can be loaded using FcConfigAppFontAddDir, but not available in CSS through local("Google Sans"). How can I debug this?

Hi,

If you don't have access to any of the below links, please let me know.

Our code loads additional fonts when booting up (code). I applied the following patch and ensured fonts are loaded correctly.

--- a/chromecast/browser/cast_browser_main_parts.cc
+++ b/chromecast/browser/cast_browser_main_parts.cc
@@ -451,9 +451,13 @@ void CastBrowserMainParts::ToolkitInitialized() {
   FcInit();

   const FcChar8 *dir_font_char8 = reinterpret_cast<const FcChar8*>(dir_font.value().data());
+  LOG(INFO) << "clkbp Loading from " << dir_font_char8;
   if (FcConfigAppFontAddDir(nullptr, dir_font_char8) == FcFalse) {
     LOG(ERROR) << "Cannot load fonts from " << dir_font_char8;
   }
+  auto* font_set = FcConfigGetFonts(nullptr, FcSetApplication);
+  FcFontSetPrint(font_set);
+  LOG(INFO) << "clkbp Loaded from " << dir_font_char8;
 #endif
 }

logs attached as font_load_log.txt

Then I try to use it in CSS file with local("Google Sans") but the browser cannot render with correct fonts.

I cannot reproduce it in chrome browser, and it would be too complicated for you to reproduce. So may I ask the path from CSS to fontconfig? especially

1. how CSS looks for available fonts in fontconfig

2. how CSS falls back to other fonts

Thank you!

--

Best,

Linkun Chen

If you get an email from me outside of the 9-5, it is not because I am always on or expect an immediate response from you; it is because work flexibility is key for me. Evening and weekend emails are a sign that I prioritized personal obligations or had trouble focusing during the day and took a break from work for a few hours.

[Dominik Röttsches]

Hi Linkun,

@font-face { src: local() } needs a PostScript name or Full Font name as arguments. Those names describe a font uniquely, not just by family name. In the case of Google Sans regular weight, the full font name is "Google Sans Regular" and the PostScript name is "GoogleSans-Regular". You can use either of those two as the argument to the local() src descriptor. Whereas in regular "family matching", for example in a style declaration that uses `family: "Google Sans"`, the font name is matched against the family name of the font, and additional styling information such as font-weight is used to disambiguate different weights.

In your font config log of loaded fonts, you can see the names you can use for local() in the "Full name" lines.

Hope this helps,

Dominik

[Linkun Chen]

Thank you Dominik! It seems working.

Is it a recent change? The following code used to work but was broken in recent release merge:

@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Google Sans'),
       url(fallback_url_in_some_special_cases) format("truetype");
}

[Linkun Chen]

+Sean Topping +Luke Halliwell +Michael Spang 

[Dominik Röttsches]

Hi Linkun,

yes, in Chrome 77 we fixed how local() matching works, see https://chromestatus.com/feature/5676948229455872 and https://bugs.chromium.org/p/chromium/issues/detail?id=828317

If you need a transitional behavior between Chrome versions, you can put multiple local() values in the src: line.

Dominik