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.