Import a custom font

In the plot layout, we’ve specified a nonstandard font (Noto Sans), so we’ll need to import it from Google Fonts. Scroll down to ‘Theme’ in the App Browser, and click on ‘Assets’:

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=Noto+Sans&display=swap');

Let’s use Noto Sans as the main font for our app, not just the plots. Scroll down to the ‘Typography’ section of theme.css (around line 85), and modify the css that styles the body of your app to look like this:

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