How to Create a Custom Font for Your FlutterFlow App

Go to Theme Settings (paintbrush icon in left Navigation Menu) → Typography tab. Click on the font family name for any typography style (e.g., Headline Large). A font picker panel opens with a search bar. Type the name of any Google Font — like Inter, Poppins, Roboto, or Plus Jakarta Sans. Click the font name to select it. FlutterFlow downloads and applies the font instantly, including all available weight variants. No file upload needed.

In Theme Settings → Typography, click Custom Fonts at the top of the font panel. Click Upload Font and select your TTF or OTF file for the Regular (400) weight. After uploading, click Upload Font again for each additional weight: Medium (500), SemiBold (600), and Bold (700). Name each upload with the weight so FlutterFlow correctly maps them. Each weight file must be uploaded separately — FlutterFlow does not extract multiple weights from a single file.

With your custom font uploaded, click each typography style name (Display Large, Headline Large, Headline Small, Body Medium, Body Small, etc.) and select your custom font from the font picker. For heading styles, you might use one font family. For body styles, use the same or a different one. Set the font weight for each style: Headline Large might use Bold (700), while Body Medium uses Regular (400). Set font size and letter spacing to complete each style definition.

Navigate to any page and select a Text widget. In the Properties Panel, click the text style dropdown and choose a typography style like Headline Small or Body Medium. The Text widget should render in your custom font at the specified weight and size. Check multiple typography styles across the page to verify all weights render correctly — especially Bold, which should look distinctly heavier than Regular.

When writing Custom Widgets or after exporting the code, access your font via FlutterFlowTheme.of(context).bodyMediumFamily for the font family name. For manual reference, use the family name exactly as it appears in Theme Settings. In exported projects, font files are in the assets/fonts/ directory and registered in pubspec.yaml under the fonts section. You can also use GoogleFonts.fontName() for Google Fonts in Custom Code.

1// Reference theme font in Custom Code
2Text(
3  'Custom styled text',
4  style: TextStyle(
5    fontFamily: FlutterFlowTheme.of(context).bodyMediumFamily,
6    fontSize: 16,
7    fontWeight: FontWeight.w400,
8  ),
9);
10
11// Or use Google Fonts directly
12import 'package:google_fonts/google_fonts.dart';
13
14Text(
15  'Google Font text',
16  style: GoogleFonts.poppins(
17    fontSize: 16,
18    fontWeight: FontWeight.w600,
19  ),
20);