Typography & Icons

This section puts you in complete control of your app's text styling. With options to add responsive and custom fonts, you can ensure your app looks unique and consistent across all screen sizes. Moreover, you can also add custom icons to your app, allowing you to create unique and visually appealing user interfaces.

Define Text Styles (Typography/Fonts)

To change the font family at the project level, open the Theme Settings (from the navigation menu) > Typography & Icons, click on the button below the Primary Font Family or Secondary Font Family, and search and select the new font.

The Primary Font Family is the font that you will use the most throughout your app. The Secondary Font Family is the font that you will use to serve slight variation or contrast to the primary font.

You can customize the following properties of each text style:

• Font Size - Use this to specify the size of the text.

• Letter Spacing - Use this to set the space between characters.

• Italic - Checkbox for enabling Italic font style.

• Font Weight - Choose the font weight among Thin, Extra Light, Light, Normal, Medium, Semi Bold, Bold, Extra Bold & Black.

• Color - Set the color of the text using either the color picker or by specifying a Hex value.

• Font Family - You can change the Font Family for any style from here. Click here to set the font family from Google Fonts or choose from the uploaded Custom Fonts. You can also choose whether this style is a Primary or Secondary Font Family.

Changing text styles

Adding responsive text styles

When developing a mobile app, it's important to consider the different platforms on which it will run. You might notice that the text looks smaller on platforms with higher screen resolution, such as tablets, web, or desktops. This can impact the user experience and make your app difficult to read. To solve this issue, you can add responsive text that adjusts the font size based on the platform.

See how the texts are displayed with and without responsive font style:

With responsive Text

Without responsive text

You can add the responsive style by following the instructions below:

1. Open the Theme Settings (from navigation menu) > Typography & Icons.

2. Click on the Make Responsive button.

3. Now, all the styles are available under the three tabs. Mobile, Tablet, and Desktop. Modify each style under the different platform tabs that you are supporting.

4. Run the app and see how the texts are displayed by changing the platform.

Adding responsive text styles

---

Adding Custom Fonts

Adding Custom Fonts to your app makes it stand out from others. This section allows you to upload your own fonts. You can upload the custom font files of types .ttf, .otf, and .woff. Once the font is uploaded, you can use it directly from the widget or add it to the text style section to create a general theme.

Before you upload the Custom Fonts, make sure you have permission to use the font in your application.

To add the Custom Fonts:

1. Open the Theme Settings (from navigation menu) > Typography & Icons.

2. Scroll down to the Custom Fonts section.

3. Click on the + Add Font button.

4. Enter the Font Family Name and click the Upload File(s) button.

5. Select and upload your font.

6. Click Add Font. The newly added font will be displayed.

7. To use a custom font directly in a widget, move to the property panel, click on the already applied font family, select the Custom Fonts tab, and then choose the font.

8. To use a custom font for a common text style, open the Text Styles section, click on the already applied font family, select the Custom Fonts tab, and then choose the font.

Adding Custom Fonts

---

Adding Custom Icons

Adding Custom Icons to your app helps you build the brand identity. Before you add the Custom Icons in FlutterFlow, you need to generate them from any icon generation site (like fluttericon and iconmoon) and export them using appropriate settings.

Make sure you have permission to use the icons in your application.

To add custom icons:

1. Head over to the iconmoon.

2. Import your custom icon (.svg) or select from the free icons set.

3. Select the Generate Font tab.

4. Click on the Settings button (gear icon) beside the download text on the bottom right side.

5. Enable Generate Dart class for Flutter.

6. Click on the Download button and then extract the downloaded file.

Create and download custom icon from https://icomoon.io/

6. Open your FlutterFlow project, navigate to the Theme Settings (from navigation menu) > Typography & Icons.

7. Scroll down to the Custom Icons section.

8. Click on the + Add Icons button.

9. Click on the Upload Icon File button.

10. Select and upload .ttf file under the downloaded folder > fonts.

11. Now click on the Upload Icon Info button.

12. Select and upload the filename.dart under the downloaded folder (besides the fonts folder).

13. Click Add Icons.

14. To use a custom icon, add the Icon widget, move to the properties panel, and scroll down to the Icon section.

15. Click on the already selected icon, select the Custom Icons tab, and then select your icon.

Adding Custom Icons

If you prefer watching a video tutorial, here is the guide for you:

---

Video guide

If you prefer watching a video tutorial, here's the one for you:

---

Last Updated Date: September 4, 2023