How to Configure Custom Fonts for Different Platforms in ChatMCP

ChatMCP determines the global application font through the getPlatformFontFamily() method in lib/main.dart, which detects the host platform and returns a specific font family name that Flutter applies via ThemeData.fontFamily.

ChatMCP is an open-source Flutter-based chat client that requires distinct typography for each operating system to maintain native aesthetics. Configuring custom fonts for different platforms in ChatMCP involves modifying a single helper method and declaring your font assets in the project configuration files.

How Platform-Specific Fonts Work in ChatMCP

The getPlatformFontFamily() Method

In lib/main.dart, the getPlatformFontFamily() function serves as the central authority for font selection. The method checks Flutter's platform constants—including kIsWindows, kIsMacOS, kIsLinux, kIsIOS, kIsAndroid, and kIsWeb—to determine the current environment and returns the appropriate font family name as a string.

// lib/main.dart
String getPlatformFontFamily() {
  if (kIsWindows) {
    return 'MiSans';
  }
  if (kIsMacOS || kIsIOS) {
    return 'SFProDisplay';
  }
  if (kIsLinux || kIsAndroid) {
    return 'NotoSans';
  }
  if (kIsWeb) {
    return 'Roboto';
  }
  return ''; // Falls back to Flutter default
}

Theme Integration

The returned font family name is injected into both the light and dark themes through the fontFamily parameter of ThemeData. This ensures every text widget throughout the application hierarchy—from app bars to message bubbles—inherits the platform-specific typeface automatically.

// lib/main.dart
MaterialApp(
  theme: ThemeData(
    // ... other theme properties
    fontFamily: getPlatformFontFamily(),
  ),
  darkTheme: ThemeData(
    // ... other theme properties
    fontFamily: getPlatformFontFamily(),
  ),
)

Step-by-Step Configuration Guide

To implement custom fonts across platforms, you must add the font files, declare them in your configuration, and extend the platform detection logic.

Add Font Assets

Place your font files (.ttf or .otf) in the assets/fonts/ directory. Organize files by platform or family name to maintain clarity.

assets/
└─ fonts/
    ├─ MiSans-Regular.ttf          # Windows

    ├─ SFProDisplay-Regular.ttf    # macOS / iOS

    ├─ NotoSans-Regular.ttf        # Linux / Android

    └─ Roboto-Regular.ttf          # Web fallback

Declare Fonts in pubspec.yaml

Register each font family in the flutter: section of pubspec.yaml. The family name declared here must match the string returned by getPlatformFontFamily().

flutter:
  fonts:
    - family: MiSans
      fonts:
        - asset: assets/fonts/MiSans-Regular.ttf
    - family: SFProDisplay
      fonts:
        - asset: assets/fonts/SFProDisplay-Regular.ttf
    - family: NotoSans
      fonts:
        - asset: assets/fonts/NotoSans-Regular.ttf
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf

Modify lib/main.dart

Extend the getPlatformFontFamily() method to return the appropriate family name for each platform you support. The method is compact and self-contained, requiring no changes to other widgets or theme definitions.

String getPlatformFontFamily() {
  if (kIsWindows) return 'MiSans';
  if (kIsMacOS || kIsIOS) return 'SFProDisplay';
  if (kIsLinux || kIsAndroid) return 'NotoSans';
  if (kIsWeb) return 'Roboto';
  return '';
}

After saving these changes, restart the application. Flutter's asset system will bundle the fonts, and the theme engine will apply the platform-specific family throughout the UI.

Implementation Examples

Windows Configuration

To use MiSans exclusively on Windows while allowing other platforms to use defaults:

String getPlatformFontFamily() {
  if (kIsWindows) return 'MiSans';
  return '';
}

macOS and iOS Setup

Apply San Francisco Pro or custom alternatives for Apple ecosystems:

String getPlatformFontFamily() {
  if (kIsMacOS || kIsIOS) return 'SFProDisplay';
  return '';
}

Linux and Android Fonts

NotoSans provides excellent Unicode coverage for Linux desktop and Android devices:

String getPlatformFontFamily() {
  if (kIsLinux || kIsAndroid) return 'NotoSans';
  return '';
}

Web-Specific Typography

Serve lightweight web-optimized fonts when running in browser environments:

String getPlatformFontFamily() {
  if (kIsWeb) return 'Roboto';
  return '';
}

Key Files and Architecture

Understanding the relationship between these files ensures maintainable font configuration:

• lib/main.dart – Contains the getPlatformFontFamily() implementation (lines 70-75) where platform detection and font selection logic resides.
• pubspec.yaml – Declares font assets under the flutter: → fonts: section, registering them with the Flutter build system.
• assets/fonts/ – Directory holding the actual .ttf or .otf files referenced in the configuration.
• Widget tree – Components like lib/widgets/markdown/widgets/inline_code.dart automatically inherit the selected font through the global ThemeData without requiring individual modifications.

Summary

• Centralized control: The getPlatformFontFamily() method in lib/main.dart is the single source of truth for platform-specific font selection.
• Declarative setup: Fonts must be added to assets/fonts/ and registered in pubspec.yaml before they can be referenced in code.
• Automatic propagation: Once configured in ThemeData.fontFamily, the selected typeface applies globally without modifying individual widgets.
• Platform constants: Use Flutter's kIsWindows, kIsMacOS, kIsLinux, kIsIOS, kIsAndroid, and kIsWeb booleans to target specific operating systems.

Frequently Asked Questions

Where is the font configuration defined in ChatMCP?

The font configuration logic resides in lib/main.dart inside the getPlatformFontFamily() function, which returns a string that is passed to ThemeData.fontFamily for both light and dark themes.

Do I need to modify individual widgets to use custom fonts?

No. Because the font family is set at the MaterialApp theme level via ThemeData.fontFamily, all text widgets throughout the application—including those in lib/widgets/markdown/widgets/inline_code.dart—automatically inherit the platform-specific font without requiring individual style modifications.

Can I use different fonts for specific languages or regions?

While getPlatformFontFamily() currently checks for platform type rather than locale, you can extend the method to accept Locale parameters or check Platform.localeName to return different font families based on language codes, provided those fonts are declared in pubspec.yaml.

What font formats does ChatMCP support?

ChatMCP supports any font format supported by Flutter, including TrueType (.ttf) and OpenType (.otf) files. Variable fonts are also supported if the specific font file uses the .ttf or .otf extension and follows Flutter's variable font implementation standards.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}