Chapter 8:
Optional: Customise font

This part is optional! If you’re comfortable with HTML and CSS, we’ll show you how to use these technologies to make fine-grained changes to the appearance of your app. But you don’t need any HTML or CSS knowledge to use Anvil.

Anvil’s themes are defined with CSS stylesheets and HTML. You can customise the look and feel of your app in the Assets Editor (under “Assets” in the App Browser).

To illustrate, let’s change the font of your news app.

Scroll down to ‘Theme’ in the App Browser, and click on ‘Assets’:

Location of 'Assets' in the App Browser

In the dropdown at the top, select theme.css, and add this line to the top of your css:

/**
 This CSS implements the Material Design look and feel for Anvil apps.
 **/
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

Scroll down to the ‘Typography’ section of theme.css (around line 83), and modify the css that styles the body of your app to look like this:

/* Typography */
body {
  font-family: 'Open Sans', sans-serif; /* edit this line */
  font-size: 14px;
  line-height: 1.4286;
  background-color: #fafafa;
}

Run your app, and you’ll see the font has now changed!

Congratulations, you've completed this chapter!