Adalo Resources
Search…
Fonts
Use different fonts in your Adalo app.
Simple Guide
Where Can I Set the Fonts for my App?
In the Branding Tab of the left toolbar, you can see the fonts that are available to use in your app. There are two types of fonts you can set -- a Heading Font and a Body Font. When you add components to your app, the text in them will default to one of these two selected fonts.
What Fonts are Available?
- If you are on a Free Adalo plan, you have access to the following font options
- Oswald
- Merriweather
- Source Sans Pro
- Standard System Font
- If you are on a Paid Adalo plan, you have access to choose from over 1,000 fonts from Google Fonts
What is Standard System Font?
Choosing this option will set the font of the text in your app to be the default font of the device that your users are viewing your app on. For Android and Chromebooks, this is Roboto. For iOS and Mac devices, this is San Francisco. For Windows 10, this is a font called Segoe UI.
Most apps, especially those in the app stores, use the Standard System Font rather than customize their fonts.
What Fonts Should I Choose?
Choosing fonts that work well (and work well together) can be daunting. There is literally a whole professional field of experts on the subject of typography. Because we want making beautiful apps be as easy as possible, we've provided a number of features to make font selection easy for you.
Popular Pairings - After you set your Heading Font, when you go to set your Body Font, Adalo will automagically suggest fonts that Pair well with your heading selection. So in the example below, Oswald was selected as the Heading Font, and Adalo is suggesting that Open Sans, Roboto, Lato, Montserrat, or Source Sans Pro would pair well with Oswald. Think of this feature as a sommelier for your font choice.
Popular Fonts - Beyond suggested pairings, Adalo also suggests a selection of popular fonts. Both Heading and Body each have their own selection of popular fonts chosen for their style, variety, and accessibility by our design team.
Search & Explore - Of course every app and brand is unique, so you don't have to just follow the popular crowd. If you've already got a font you know you want to use, you can just start typing the name of the font you want to immediately start searching the entire Google Fonts library.
If you don't know what font you want to use, and you're in the mood for browsing, the Explore option is always available at the bottom of the font selection dropdowns. This option takes you directly to the Google Fonts website where you can browse and filter on a number of criteria to find the font that's perfect for your app.
.gif?alt=media&token=4b9eb492-a130-4a46-aa6c-fc2fabce5f76)
Using Fonts
Now that you've set the fonts for your app in the Branding tab, it's time to use them! You can select any component in your app that has configurable text, and in the left panel, below where you can set the text that displays, you will see a tool bar with an icon to add magic text, and a palette icon to open the Formatting Menu.
Using formatting menu - When the formatting menu is open you'll be able to set the following:
- Font
- Here you can select for this text to use either your Heading Font or your Body Font
- Font Weight
- Choose from options like Normal, Bold, and Extra Bold
- Note: Different Fonts have different weight options available to them. The options in this dropdown automatically change based on what font you have selected.
- Font Size
- Set the size of the text
- Alignment
- Choose whether the text is aligned left, right, or center
- Text Color
- Set the color for your text
Note: Not all components will enable all of the possible options in the formatting tool bar. Component developers have the option to enabled which formatting settings make sense for their component.
Changing Fonts
If you decide to change which fonts you are using in your app, you can do this by heading back to the Branding tab in the left toolbar. When you update either your Heading or Body font, Adalo will automatically update all of the components in your app with the relevant new font. No need to go back to every single component in your app and update them one at a time!
Help
If you need additional help with this article, you can always ask in our community forum! Be sure to paste the link to this article in your post as well!
Last modified 10mo ago
Copy link
Contents
Help