fbpx

How to use a specific font for an app

In this article, we are going to see how to use specific fonts in your app by using the SCSS/CSS section in Colors.Firstly, go to the Colors menu in the Twilight Tech Appmaker App Builder editor:

Screen Shot 2016-09-15 at 12.35.13

Then, scroll down in the page and enable the Advanced customization section:

Screen Shot 2016-09-15 at 12.35.21

In this section you can now add a new font by using the method @import, like this:

@import 'https://fonts.googleapis.odeom/css?family=Ewert';

In this example, we have imported the font “Ewert”. We can now use this font in our app.

How to use the new font(s) in our app?

Still in this advanced section, following our font import, we are going to call the font in our CSS:

.view {
*{
font-family: 'Ewert' !important;
font-size: 30px !important;
}
}

Click on “save”.

In this SCSS example, we can see we are using the font “Ewert” in all our app.

Here are the results:

Before:

Screen Shot 2016-09-15 at 12.50.53

After:

Screen Shot 2016-09-15 at 12.56.33