Fonts
Use different fonts in your Adalo app.
Last updated
Use different fonts in your Adalo app.
Last updated
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.
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
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.
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.
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.
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!
Check out this Adalo blog post for Tips & Tricks for Using Fonts in Adalo!
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!
