Etch

Etch has no font picker; you style with CSS. Nahnu Fonts loads your fonts in Etch’s editing canvas and suggests them as you type font-family: in Etch’s CSS editor. Checked against the Etch 1.7.1 source.

Use a font#

1. Open a page in Etch and select an element.
2. In the CSS editor, type font-family:.
3. Your fonts are suggested, labelled Nahnu Fonts. Pick one.

With CSS variables on (the default), the suggestion inserts the variable, for example:

font-family: var(--nahnu-font-inter);

With CSS variables off, it inserts the full stack, such as 'Inter', sans-serif.

You can also type the variable or family name yourself; the suggestions are just a shortcut.

How it works#

• Your stylesheet is added to Etch’s canvas, so text previews in the real font while you edit.
• It isn’t loaded on Etch’s own interface, so “Apply to” rules such as body don’t restyle Etch’s panels.
• On your live site, the stylesheet loads as usual.

Google Fonts switch#

Not needed: Etch loads no Google Fonts itself.

Good to know#

• The canvas needs the stylesheet file. If Print the CSS inside each page is on, the canvas still gets the file version.
• The CSS suggestions use Etch’s internal code editor setup and may stop appearing after an Etch update. Your fonts still load in the canvas and on the site either way; just type the variable by hand.

Turn it off#

Settings → Where fonts appear → Use with Etch.