Have you used custom tones in flutter

Question

Accepted Answer

## Overview

Yes, Flutter supports **custom fonts** (like Google Fonts, downloaded fonts, or custom typefaces) to style text beyond the default Roboto (Android) and San Francisco (iOS) fonts.

---

## Method 1: Using Google Fonts Package

**Easiest method** — no font files needed, fetched from Google Fonts CDN.

### Installation

```yaml
dependencies:
  google_fonts: ^6.1.0
```

### Usage

```dart
import 'package:google_fonts/google_fonts.dart';

Text(
  'Hello World',
  style: GoogleFonts.lato(
    fontSize: 24,
    fontWeight: FontWeight.bold,
  ),
)

// Apply to entire app
MaterialApp(
  theme: ThemeData(
    textTheme: GoogleFonts.latoTextTheme(),
  ),
)
```

**Available fonts:** 1000+ fonts from [Google Fonts](https://fonts.google.com/).

---

## Method 2: Custom Font Files (.ttf, .otf)

Use downloaded font files from your assets.

### Step 1: Add Font Files

**Project structure:**

```
my_app/
  assets/
    fonts/
      Roboto-Regular.ttf
      Roboto-Bold.ttf
      Roboto-Italic.ttf
      Roboto-BoldItalic.ttf
```

### Step 2: Declare Fonts in pubspec.yaml

```yaml
flutter:
  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf
        - asset: assets/fonts/Roboto-Bold.ttf
          weight: 700
        - asset: assets/fonts/Roboto-Italic.ttf
          style: italic
        - asset: assets/fonts/Roboto-BoldItalic.ttf
          weight: 700
          style: italic
```

### Step 3: Use Custom Font

```dart
// In widget
Text(
  'Custom Font',
  style: TextStyle(
    fontFamily: 'Roboto',
    fontSize: 20,
    fontWeight: FontWeight.bold,
  ),
)

// App-wide theme
MaterialApp(
  theme: ThemeData(
    fontFamily: 'Roboto',
  ),
)
```

---

## Font Weights

Map font files to different weights.

```yaml
flutter:
  fonts:
    - family: OpenSans
      fonts:
        - asset: assets/fonts/OpenSans-Light.ttf
          weight: 300
        - asset: assets/fonts/OpenSans-Regular.ttf
          weight: 400
        - asset: assets/fonts/OpenSans-SemiBold.ttf
          weight: 600
        - asset: assets/fonts/OpenSans-Bold.ttf
          weight: 700
```

**Usage:**

```dart
Text(
  'Light Text',
  style: TextStyle(
    fontFamily: 'OpenSans',
    fontWeight: FontWeight.w300, // Uses Light
  ),
)

Text(
  'Bold Text',
  style: TextStyle(
    fontFamily: 'OpenSans',
    fontWeight: FontWeight.w700, // Uses Bold
  ),
)
```

---

## Multiple Custom Fonts

Use different fonts for different purposes.

```yaml
flutter:
  fonts:
    - family: Montserrat
      fonts:
        - asset: assets/fonts/Montserrat-Regular.ttf
        - asset: assets/fonts/Montserrat-Bold.ttf
          weight: 700

- family: Lora
      fonts:
        - asset: assets/fonts/Lora-Regular.ttf
        - asset: assets/fonts/Lora-Italic.ttf
          style: italic
```

**Usage:**

```dart
Text(
  'Heading',
  style: TextStyle(fontFamily: 'Montserrat', fontSize: 32),
)

Text(
  'Body text',
  style: TextStyle(fontFamily: 'Lora', fontSize: 16),
)
```

---

## App-Wide Custom Font

Set default font for entire app.

```dart
MaterialApp(
  theme: ThemeData(
    fontFamily: 'Montserrat', // Default font
    textTheme: TextTheme(
      displayLarge: TextStyle(fontSize: 96, fontWeight: FontWeight.w300),
      displayMedium: TextStyle(fontSize: 60, fontWeight: FontWeight.w400),
      bodyLarge: TextStyle(fontSize: 16, fontWeight: FontWeight.w400),
      bodyMedium: TextStyle(fontSize: 14, fontWeight: FontWeight.w400),
    ),
  ),
)

// All Text widgets now use Montserrat
Text('This uses Montserrat') // Default
```

---

## Override Default Font for Specific Text

```dart
Text(
  'Special Text',
  style: Theme.of(context).textTheme.bodyLarge?.copyWith(
    fontFamily: 'Lora', // Override default
    fontSize: 18,
  ),
)
```

---

## Icon Fonts (Custom Icons)

Use custom icon fonts (like Font Awesome).

```yaml
flutter:
  fonts:
    - family: FontAwesome
      fonts:
        - asset: assets/fonts/fontawesome.ttf
```

**Usage:**

```dart
Icon(
  IconData(0xf004, fontFamily: 'FontAwesome'), // Heart icon
  size: 32,
  color: Colors.red,
)
```

**Better alternative:** Use [font_awesome_flutter](https://pub.dev/packages/font_awesome_flutter) package.

---

## Variable Fonts

Flutter supports variable fonts (single file with multiple weights/styles).

```yaml
flutter:
  fonts:
    - family: InterVariable
      fonts:
        - asset: assets/fonts/Inter-VariableFont.ttf
```

**Usage:**

```dart
Text(
  'Variable Font',
  style: TextStyle(
    fontFamily: 'InterVariable',
    fontVariations: [
      FontVariation('wght', 500), // Weight variation
    ],
  ),
)
```

---

## Fallback Fonts

Define fallback fonts if primary font doesn't have a glyph.

```dart
Text(
  'Hello 你好',
  style: TextStyle(
    fontFamily: 'Roboto',
    fontFamilyFallback: ['NotoSansCJK'], // Fallback for Chinese
  ),
)
```

---

## Common Font Formats

| Format | Supported | Notes |
|--------|-----------|-------|
| `.ttf` (TrueType) | ✅ Yes | Most common |
| `.otf` (OpenType) | ✅ Yes | Modern format |
| `.woff`, `.woff2` (Web) | ❌ No | Web-only (use .ttf) |
| Variable fonts | ✅ Yes | Single file, multiple styles |

---

## Where to Get Custom Fonts

1. **Google Fonts** — https://fonts.google.com (free)
2. **Font Squirrel** — https://www.fontsquirrel.com (free)
3. **Adobe Fonts** — https://fonts.adobe.com (subscription)
4. **Paid fonts** — MyFonts, FontShop (commercial use)

---

## Performance Tips

```dart
// ✅ Preload fonts in main()
void main() async {
  WidgetsFlutterBinding.ensureInitialized();

await Future.wait([
    GoogleFonts.pendingFonts([
      GoogleFonts.lato(),
      GoogleFonts.montserrat(),
    ]),
  ]);

runApp(MyApp());
}

// ✅ Use Google Fonts with caching
Text(
  'Cached Font',
  style: GoogleFonts.lato(), // Auto-cached
)

// ❌ Don't load too many custom fonts (slows app startup)
```

---

## Complete Example

**pubspec.yaml:**

```yaml
flutter:
  fonts:
    - family: Montserrat
      fonts:
        - asset: assets/fonts/Montserrat-Regular.ttf
        - asset: assets/fonts/Montserrat-Bold.ttf
          weight: 700
```

**main.dart:**

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        fontFamily: 'Montserrat', // App-wide font
        textTheme: TextTheme(
          displayLarge: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
          bodyLarge: TextStyle(fontSize: 16),
        ),
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('Custom Fonts')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Regular Text'), // Uses Montserrat Regular
              Text(
                'Bold Text',
                style: TextStyle(fontWeight: FontWeight.bold), // Uses Montserrat Bold
              ),
            ],
          ),
        ),
      ),
    );
  }
}
```

---

## Best Practices

```dart
// ✅ Use Google Fonts for quick prototyping
Text('Hello', style: GoogleFonts.roboto())

// ✅ Use custom font files for production (better performance)
Text('Hello', style: TextStyle(fontFamily: 'Montserrat'))

// ✅ Set app-wide default font in ThemeData
MaterialApp(theme: ThemeData(fontFamily: 'Montserrat'))

// ✅ Include multiple weights for same font family
fonts:
  - asset: Montserrat-Regular.ttf
  - asset: Montserrat-Bold.ttf
    weight: 700

// ❌ Don't use too many different fonts (inconsistent UI)
// Stick to 2-3 font families max
```

**Learn more:**
- [Google Fonts Package](https://pub.dev/packages/google_fonts)
- [Flutter Custom Fonts Documentation](https://docs.flutter.dev/cookbook/design/fonts)

Have you used custom tones in flutter

Answer

Overview

Method 1: Using Google Fonts Package

Installation

Usage

Method 2: Custom Font Files (.ttf, .otf)

Step 1: Add Font Files

Step 2: Declare Fonts in pubspec.yaml

Step 3: Use Custom Font

Font Weights

Multiple Custom Fonts

App-Wide Custom Font

Override Default Font for Specific Text

Icon Fonts (Custom Icons)

Variable Fonts

Fallback Fonts

Common Font Formats

Where to Get Custom Fonts

Performance Tips

Complete Example

Best Practices

Related Questions

Lifecycle of stateful widget and explain everything

Diff btw stateless and stateful widget and explain

Routes in flutter

Statemangment used in flutter

What is override in flutter

Format	Supported	Notes
text `.ttf` (TrueType)	✅ Yes	Most common
text `.otf` (OpenType)	✅ Yes	Modern format
text `.woff` , text `.woff2` (Web)	❌ No	Web-only (use .ttf)
Variable fonts	✅ Yes	Single file, multiple styles