Using your fonts
Once a font is in your library and switched on, you can use it four ways. Pick the one that matches how you build; you can mix them.
| Way | Best for | Where |
|---|---|---|
| Block editor and Site Editor | Block themes and Gutenberg content | Typography panel |
| Page builder font picker | Elementor, Bricks, Breakdance and the other builders | The builder’s typography controls |
| “Apply to” selectors | Setting a font site-wide with no editor work | Font library → Edit |
| CSS variables | Custom CSS, child themes, any other tool | Your stylesheet |
Block editor and Site Editor#
Your fonts are added to the Typography font picker of every block that supports fonts.
- One block: select it, open Typography in the block sidebar (you may need to open the options menu and turn on Font), and choose the font.
- Whole site (block themes): in Appearance → Editor → Styles → Typography, set fonts for Text, Headings, Links, Buttons and more.
Fonts are added under a preset slug like nahnu-inter. On classic themes, a matching .has-nahnu-inter-font-family class is output too, so fonts picked in the block editor also work there.
Turn this off with Settings → Where fonts appear → Block editor & Site Editor.
Page builders#
Your fonts appear in the font pickers of 13 builders and themes, each in the way that builder supports. See the post for your builder under Integrations.
“Apply to” selectors#
In Font library, click Edit on a font and enter CSS selectors in Apply to, separated by commas.
| You enter | Result |
|---|---|
body | All text uses the font, unless something more specific overrides it |
h1, h2, h3 | Those headings use the font |
.site-title | Your site title uses the font |
.button, button | Buttons use the font |
Nahnu Fonts adds a rule like h1, h2, h3 { font-family: 'Inter', sans-serif; } to its stylesheet. Your theme’s or builder’s own CSS may be more specific and win; in that case, set the font in the theme or builder instead.
CSS variables#
Every active font gets a CSS custom property on :root, named after the font:
:root {
--nahnu-font-inter: 'Inter', sans-serif;
--nahnu-font-open-sans: 'Open Sans', sans-serif;
}Use it anywhere CSS is accepted:
.hero-title {
font-family: var(--nahnu-font-inter);
font-weight: 700;
}The exact variable is shown next to each font in the Font library; click it to copy. The variable includes the fallback you set. Turn variables off with Settings → Where fonts appear → CSS variables.
Using the family name directly#
The stylesheet declares each font by its family name, so font-family: 'Inter', sans-serif; also works. Prefer the variable: if you change the fallback later, every use updates.
Weights and styles#
Use only weights you have added. If you set font-weight: 600 but only 400 and 700 exist, the browser picks the closest one. If no italic exists, browsers slant the regular style instead (“faux italic”).