Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter: custom fonts

Tags:

flutter

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.
like image 938
boeledi Avatar asked Jun 17 '18 10:06

boeledi


People also ask

Does Flutter support OTF fonts?

Flutter supports . ttf and . otf font formats for all platforms. Roboto and San Fransisco are the default font family for Android and iOS, respectively.

What fonts are built into Flutter?

The default fonts depend on the operating system: Android uses the Roboto font. iOS uses the San Francisco font (specifically, SF Pro Display).

Where do I download fonts for Flutter?

Now, in our Flutter project, we need to create a ./assets folder in the root project folder. Inside the ./assets folders, we need to create another folder called ./fonts folder. Next, we need to copy the required font files and paste them inside the ./assets/fonts folder of our Flutter project.


1 Answers

enter image description here

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.
like image 196
Suragch Avatar answered Nov 13 '22 10:11

Suragch