Does Flutter/Dart know what glyphs are available in loaded font files?

Question

I am trying to put a specified unicode character into a Text widget, but only if there is a glyph available in the fontFamily font specified in the TextStyle.

What currently happens by design is the fontFamilyFallback font is checked for a glyph, and if not found then the system font is checked, then if still no glyph found a 'not found' style glyph is rendered instead - usually a box with an X inside (depends on system I think).

I wonder if there is a way to disable that fall-back or even better have a list of available glyphs before building the text widget?

Attached some example code, and the results of the code in a screenshot. The code uses two fonts available via google fonts, and attempts to output the euro unicode character \u20ac. You can see from the screenshot that Syne has a glyph at u20ac, but Arvo does not. This could also be validated in for example Windows Character map.

Flutter Code (nothing in texttheme other than fontsize):

  Widget build(BuildContext context) {
return Scaffold(
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          'No fontfamily, no fontfamilyfallback \u20AC',
        ),
        Text(
          'fontfamily Syne Tactile: \u20AC',
          style: TextStyle(fontFamily: 'Syne'),
        ),
        Text(
          'fontfamily Arvo, no fontfamilyfallback \u20AC',
          style: TextStyle(fontFamily: 'Arvo'),
        ),
        Text(
          'fontfamily Arvo, fontfamilyfallback: Syne Tactile \u20AC',
          style:
              TextStyle(fontFamily: 'Arvo', fontFamilyFallback: ['Syne']),
        ),
      ],
    ),
  ),
);  }

pubspec.yaml:

  fonts:
- family: Arvo
  fonts:
    - asset: assets/Arvo-Regular.ttf
- family: Syne
  fonts:
    - asset: assets/SyneTactile-Regular.ttf

Flutter Web Output

Welcome to Stack Overflow. Please take the 2-minute [tour]. Moreover, open [Help] and read at least [ask]. Then, [edit] your question to provide a [mcve]. Questions that only ask for code are too broad and are likely to be [put on hold or closed](https://stackoverflow.com/help/closed-questions). In any case, check [Finding out what characters a given font supports](https://stackoverflow.com/questions/4458696/) — JosefZ, Feb 13 '22 at 17:45
Done, and thank you. I have checked that link and don't think it helps me with Flutter/Dart. Still some useful info there though. — Michael Reynolds, Feb 13 '22 at 20:37

Michael Reynolds · Answer 1 · 2022-02-15T11:41:53.160

Found a bit of a hack/workaround. If I load the AdobeBlank font into the package, and use that as fontFamilyFallback, then a glyph with zero width is displayed. Not ideal (better to know before building), but sort of does the job.

Can also then try and determine width before building using something like this.

Hopefully there is a better answer out there still, as I'd much rather be able to load a font and know what glyphs are available somehow.

Does Flutter/Dart know what glyphs are available in loaded font files?

1 Answers1