Getting Blank Panel Forms to recognize new app-global font

What I’m trying to do:
Get all forms to recognize new global font; in this case Google’s Space Grotesk. This is to match our forthcoming main web site, which uses Space Grotesk.

What I’ve tried
Following the instructions in Anvil Docs | Customising your font

This properly affects my Main Form:
image
and most others.

What’s not working:
A few Blank Panel forms still display Roboto, e.g.:
image

There are no font overrides in the above labels. In the .yaml file, the font entries are empty strings, just as before:

⋮
    components:
    - type: Label
      properties: {role: headline, align: center, tooltip: '', border: '', foreground: 'theme:White',
        visible: true, text: ' Image Viewer  ', font_size: null, font: '', spacing_above: none,
        icon_align: left, spacing_below: small, italic: false, background: 'theme:Primary
          500', bold: false, underline: false, icon: ''}
      name: label_1
      layout_properties: {grid_position: 'KXJRIY,MDTARV'}
⋮

Code Sample:
In standard-page.html, I commented out the existing font reference, and pasted in the one Google fonts recommended:

<!--- <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">  --->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500&display=swap" rel="stylesheet">
⋮

In theme.css, the Typography section now begins:

⋮
/* Typography */
body {
  /* font-family: Roboto, Noto, Arial, sans-serif; */
  font-family: 'Space Grotesk', Roboto, Noto, Arial, sans-serif;
⋮

Clone link:
too big to clone

For now, CSS in general, and Anvil’s use of it in particular, is out of my experience, so I’m not sure where to begin. If anyone has some pointers in the right direction, I’d appreciate it.

Only two Forms (so far) are affected: one for viewing images (e.g., charts), the other for viewing reports. The others, belonging to the Material Design category, seem to respect the new global font. Not an emergency, but it sure would be nice to get everything consistent-looking.

When you grab the Google font there’s normally the style attribute to copy and paste too.

For me it looked like

font-family: 'Space Grotesk', sans-serif;

(You could also try moving the link tags to native libraries)

Thanks! Shortening it to

font-family: 'Space Grotesk', Noto, Arial, sans-serif;

fixed the Report Viewer page.

Edit: Shortening it as far as you did, the Image Viewer still does not show Space Grotesk. Removing sans-serif causes other forms (e.g., custom log-in prompt) to revert to a serif font. But with it now down to one Form, I can probably manually override its labels.

Edit 2: Nope. Entering Space Grotesk as the font name just results in a serif font being displayed. Is there some special syntax for font names containing spaces? I tried entering a + instead of a space; single quotes; double quotes. Same result.

1 Like