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
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.