Custom fonts
Add fonts from Google Fonts or your own font files, set them for headlines, body text, labels and code, and keep your pages fast.
Fonts carry a lot of your brand. Lyna sets them for the whole project in the Brand panel, so every page and every new page the AI builds uses the same type.
Add a font from Google Fonts
Open Manage fonts
Open the Brand panel, then choose Manage fonts in the Type row. See Brand and design system.
Search
Choose Browse fonts or Add, then type in Search Google Fonts.... Choose Load more fonts to see more results.
Add it
Choose Add on a font. It appears under Project Fonts.
Use it
Pick it for the Headline, Body, Label or Mono role in the Type row. To make it the project default, open its menu and choose Set as default.
Remove a font you no longer use from its menu with Remove.
Use your own font files
For a font that is not on Google Fonts, such as a licensed brand font:
- Open Code mode, then Explorer, and choose Upload files. Put the files in
public/fonts/. The.woff2format is the smallest. - Ask the AI:
Add the font files in public/fonts as the "Acme Sans" font family with @font-face, and use it for headlines.
Check that your font license allows use on the web.
Pair fonts well
- Use two families at most: one for headlines, one for body text. Add a mono font only if you show code.
- Pair contrast: a serif headline with a sans-serif body, or one sans-serif family in two weights.
- Pick a body font that stays readable at 16 px and on phones.
Keep pages fast
- Add only the fonts you use, and only the weights you use.
- Prefer
.woff2files for your own fonts. - Ask the AI to use
font-display: swapso text shows while the font loads. - Check the result with Perf and Lighthouse in the devtools.
Change a font on one element
To use another font on a single heading or button, select it on the canvas and set the font in the Styles panel. For site-wide changes, use the Brand panel instead, so the whole app stays consistent.