I have a Flutter web application that uses emojis on different pages. First, the emojis were black and white. I was able to fix the problem using this answer and the following code in flutter_bootstrap.js:

{{flutter_js}}
{{flutter_build_config}}

_flutter.loader.load({
  onEntrypointLoaded: async function(engineInitializer) {
    const appRunner = await engineInitializer.initializeEngine({ useColorEmoji: true });
    await appRunner.runApp();
  }
});

Now, the emojis are colorful, but all of them use a different font instead of the native OS font for emojis. How can I force the use of native OS emojis? I have this issue on:

Web application - Android

Web application - iOS Example on iOS:

I prefer to do not asset any large fonts for the emoji so it could be used for release.

I have a Flutter web application that uses emojis on different pages. First, the emojis were black and white. I was able to fix the problem using this answer and the following code in flutter_bootstrap.js:

{{flutter_js}}
{{flutter_build_config}}

_flutter.loader.load({
  onEntrypointLoaded: async function(engineInitializer) {
    const appRunner = await engineInitializer.initializeEngine({ useColorEmoji: true });
    await appRunner.runApp();
  }
});

Now, the emojis are colorful, but all of them use a different font instead of the native OS font for emojis. How can I force the use of native OS emojis? I have this issue on:

Web application - Android

Web application - iOS Example on iOS:

I prefer to do not asset any large fonts for the emoji so it could be used for release.

• android
• ios
• flutter

1 Answer 1

OK, after trying a lot of ways, finally found a way. actually there are multiple ways.

when you run the command flutter build web it generates the web application but uses the Google Noto Emoji font by default, wanna change it? it does not seem easy. but guess what, it uses this only when rendering whit CanvasKit (No idea what's that) (you can read about it and flutter web rendering here).

Solutions

html rendering (best approach)

just instead of using CanvasKit use html. change the flutter build web to flutter build web --web-renderer

good for deployment. you dont need to add any large files, everything is going to be handled by the OS.

asset font

you can asset all fonts you need in the pubspec and in code check for platforms and use the proper font (or use fontFamilyFallback). the size of web will be large, so not good for deployment. but it works.

CSS injection

set the font using CSS instead of dart or flutter.

example:

import 'dart:html' as html;

void main() {
  final style = html.StyleElement();
  style.innerHtml = '''
    @font-face {
      font-family: 'NativeEmojiFallback';
      src: local('Apple Color Emoji'), local('Segoe UI Emoji'), local('Noto Color Emoji');
    }
    html, body {
      font-family: 'NativeEmojiFallback', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
  ''';
  html.document.head!.append(style);
  runApp(MyApp());
}

WebView

write some HTML CSS files, put them on asset folder. just show them using WebView.