Flutter: custom fonts

Question

SOLUTION FOUND:

Using Android Studio solved the issue !! I ran the app using Android Studio and everything worked fine! It looks like VSCode did not cope well with Custom Fonts. Therefore I would advise using Android Studio when somebody needs to add custom fonts

I am trying to use a Google Fonts, called "Great Vibes" in my application.

This is what I did:

• I created a "fonts" directory in the root folder
• I copied the "GreatVibes-Regular.ttf" file in that directory (downloaded from the Google Fonts website)
• I made a reference to it in the pubspec.yaml (see below)
• When I want to use it, I referred to it in a TextStyle

Results: The font is not used.

fonts:
    - family: GreatVibes
      fonts:
        - asset: fonts/GreatVibes-Regular.ttf
          weight: 400


new Text('My New Font',
            style: new TextStyle(
              color: Colors.white,
              fontFamily: 'GreatVibes',
              fontSize: 16.0,
            )),

No error is reported. I also validated the yaml via the Online YAML parser Here is the output:

{
  "description": "My app", 
  "dependencies": {
    "http": "^0.11.3+16", 
    "shared_preferences": "^0.4.0", 
    "url_launcher": "^2.0.0", 
    "cupertino_icons": "^0.1.0", 
    "image_picker": "^0.4.1", 
    "flutter_facebook_login": "^1.0.3", 
    "flutter_localizations": {
      "sdk": "flutter"
    }, 
    "carousel_slider": "^0.0.4", 
    "connectivity": "^0.3.0", 
    "device_info": "^0.1.2", 
    "intl": "^0.15.5", 
    "font_awesome_flutter": "^7.0.0", 
    "scoped_model": "^0.2.0", 
    "flutter": {
      "sdk": "flutter"
    }, 
    "flutter_webview_plugin": "^0.1.4"
  }, 
  "flutter": {
    "fonts": [
      {
        "fonts": [
          {
            "asset": "fonts/GreatVibes-Regular.ttf", 
            "weight": 400
          }
        ], 
        "family": "GreatVibes"
      }
    ], 
    "assets": [
      "images/avatar.png", 
      "images/logo.png"
    ]
  }, 
  "name": "my_app", 
  "dev_dependencies": {
    "flutter_test": {
      "sdk": "flutter"
    }
  }
}

I also tried by removing the app from the device and reinstall it but nothing changes.

Would you have any idea?

Thanks

flutter doctor -v

[√] Flutter (Channel beta, v0.4.4, on Microsoft Windows [Version 10.0.17134.112], locale en-US)
    • Flutter version 0.4.4 at d:\flutter
    • Framework revision f9bb4289e9 (5 weeks ago), 2018-05-11 21:44:54 -0700
    • Engine revision 06afdfe54e
    • Dart version 2.0.0-dev.54.0.flutter-46ab040e58

[√] Android toolchain - develop for Android devices (Android SDK 27.0.3)
    • Android SDK at C:\Users\boeledi\AppData\Local\Android\sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-27, build-tools 27.0.3
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b02)
    • All Android licenses accepted.

[√] Android Studio (version 3.1)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 25.0.1
    • Dart plugin version 173.4700
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b02)

[!] VS Code, 64-bit edition (version 1.24.0)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Dart Code extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code

[√] Connected devices (1 available)
    • Android SDK built for x86 • emulator-5554 • android-x86 • Android 8.1.0 (API 27) (emulator)

! Doctor found issues in 1 category.

Answer 1

How to use a custom font in a Flutter app

The OP has indicated that they solved their problem. This is a general answer for future readers.

1. Add a font to your project

• Right click on your project folder and go to New > Directory. Call it assets. It should be in your projects root directory.
• Copy and paste your font into the new assets directory. I'm just using a single font in my example, the regular dancing script font. I renamed it to dancing_script.ttf.

2. Register the font

• Open your pubspec.yaml file.

• Add the fonts info under the flutter section. Indentation is mandatory.

  flutter:
    fonts:
    - family: DancingScript
      fonts:
      - asset: assets/dancing_script.ttf
  

3. Use the font in your theme or widget

• Now you can use your font by setting the fontFamily attribute in the TextStyle widget to whatever you called it in pubspec.yaml. For this example, I called it DancingScript.

  Text(
    'Hello world',
    style: TextStyle(
      fontFamily: 'DancingScript',
    ),
  )
  

4. Restart your app

• Whenever I add assets I find I need to do a full stop and restart. Otherwise I get errors.

Notes

• Read the documentation for more help.