How to add custom font in flutter web?
2,551
Add font in the font folder and also add in the pubspec.yaml for example refer given images
Font Folder:
pubspec.yaml
now for the web add the assets
folder in the web section and add below JSON file with the name web/assets/FontManifest.json
[
{
"family": "MuliBold",
"fonts": [
{
"asset": "fonts/Muli-Bold.tff"
}
]
},
{
"family": "MuliExtraBold",
"fonts": [
{
"asset": "fonts/Muli-ExtraBold.ttf"
}
]
},
{
"family": "MuliRegular",
"fonts": [
{
"asset": "fonts/Muli-Regular.ttf"
}
]
}
]
Great now your font applied to your flutter web application.
Author by
divyanshu dhawan
Flutter and Android Developer. Thinking of some question right now.
Updated on December 13, 2022Comments
-
divyanshu dhawan over 1 year
So I am developing flutter mobile apps for some time now, and I want to explore flutter web, now I tried to add custom font but it is not showing custom font.
I have added all the dependencies and made a separate folder for fonts and added into pubspec.yaml like how I do in flutter mobile.
My main.dart
class Home extends StatefulWidget { @override _HomeState createState() => _HomeState(); } class _HomeState extends State<Home> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Colors.red, title: Text("Dextroxd", style: TextStyle( fontSize: 36.0, fontFamily: 'CookieFam', color: Colors.white, fontWeight: FontWeight.w500 )), centerTitle: true, ), ); } }
My pubspec
description: An app built using Flutter for web environment: # You must be using Flutter >=1.5.0 or Dart >=2.3.0 sdk: '>=2.3.0 <3.0.0' flutter: fonts: - family: CookieFam fonts: - asset: assets/Cookie-Regular.ttf dependencies: flutter_web: any flutter_web_ui: any dev_dependencies: build_runner: ^1.6.2 build_web_compilers: ^2.1.0 pedantic: ^1.7.0 dependency_overrides: flutter_web: git: url: https://github.com/flutter/flutter_web path: packages/flutter_web flutter_web_ui: git: url: https://github.com/flutter/flutter_web path: packages/flutter_web_ui