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:
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.
Flutter supports . ttf and . otf font formats for all platforms. Roboto and San Fransisco are the default font family for Android and iOS, respectively.
The default fonts depend on the operating system: Android uses the Roboto font. iOS uses the San Francisco font (specifically, SF Pro Display).
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.
The OP has indicated that they solved their problem. This is a general answer for future readers.
assets
. It should be in your projects root directory.assets
directory. I'm just using a single font in my example, the regular dancing script font. I renamed it to dancing_script.ttf
. Add the fonts info under the flutter
section. Indentation is mandatory.
flutter:
fonts:
- family: DancingScript
fonts:
- asset: assets/dancing_script.ttf
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',
),
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With