Studio as a visual development interface or platform offers different functionalities for any organization to design their own apps. While designing the app you would have noticed that there is a default styling used. However, every organization has its own set of branding guidelines that define the overall look and feel including the font type, size, and style. So to enable every organization to customize the look and feel of the apps, Studio provides different Config Options. Here you have the Styling and UI Customization properties that can be defined as per your standards and guidelines.
Let us understand how to customize your fonts for your selected app.
Once you login to Studio using your organizational authentication, open your App. On the App’s home page, in the top left corner of the screen, you can see the Config Options. Click to view the different configurations.
You can customize your Studio platform using these settings. Let us have a quick look at the different settings under Styling.
Under Styling, you can find the Fonts settings. These font settings would be applied to all your forms and screens in the app.
This is used to set the font-family which would then include all the settings like font style, font-weight, and Font Type. Whenever you add a new font you can select the font family here and click Save Styling to apply it to your App.
Adding Custom Fonts
You have the option to add Custom Fonts to your Font-Family, either add Google Fonts or Custom Fonts that are available on the web or from your collection.
Add Google Fonts
You can also use the Google fonts to customize your app. For these fonts, you do not need to download and install any files. You simply need to select the font from the list of available fonts under Select Google font from List. and click Add Font. The font is added to the Font-Family list. You can then select it from the Font-family and click Save Styling to apply it to your App.
Upload Custom Fonts
Studio allows you to upload custom fonts in addition to the default fonts that have already been ahead. You only need to upload and install the font files which could be of type TrueType (.ttf), Web Open Font Format (.woff), Web Open Font Format 2 (.woff2) , OpenType format (.otf).
So to add Custom Font, you first need to download the font file packet from the source like the websites providing the fonts and extract it to the specific location.
For the sake of this example let us download the Poppins font from the website and extract the files. It can also be the Font files collection as per your company’s branding policies.
Now under Upload Custom Font, click Select Font Files. You can then Import Files from their source location.
Once you have uploaded the files, you can see that they are listed out in the Settings window. You can make changes to the Font Weight and Font Type depending upon your guidelines. Make sure that the name is correct. Now click Save Styling.
Now whenever you want to change the Font style for your app, you can go to Font-Family and select the respective Font and click Save Styling.
The Font would be changed throughout the app.
Under Styling, you have seen how to change the font style. Similarly, you also have the option to change the color theme used throughout your application.
Under Styling > Studio Themes you can see the different themes like Calm, Balance, Dark, Grey and so on defined by default. Click on the Color block provided against the different themes. Choose a color to change the existing theme color.
So now if you see the themes under the Properties of any control like the Text control taken in the example here, you would note the color has been changed.
Thus you can use the Studio Themes to define your own color theme so that you can design your app’s look and feel consistently.
Spacing and Separator
The Styling option further allows you to define the spacing between two controls. The default is set at 20px. However, you can change it as px (pixel), rem (relative to root element), or em (relative to element). So on your screens, when you place the controls there would be the spacing of the specified number of units (of pixels or root element). This helps in making your screen clean and well organized to ensure an uncluttered presentation.
Now if we change the Control spacing to say for example 100px, then the controls in the app would be spaced away from each other as seen in the illustration below.
Under Styling, you can now set the default loader that appears during the buffering from one action to another. By default, you can see the Studio icon appears as a loader. However, here too depending upon your app and branding needs you can change it to another GIF also. A few sample loaders are already provided under Select from sample loaders.
If you click on the selected loader you can also select another GIF from the Gallery or Import a file from your source collection.
Select the loader and click Save Styling. Now, whenever you have buffering actions, the selected loader can be seen.
Thus the Config Options - Styling enables you to customize the look and feel of your app with Font settings and Color Themes and so on.