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:
and most others.
What’s not working:
A few Blank Panel forms still display Roboto, e.g.:
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.