The Classic Builder doesn't always render custom @font-face fonts while you edit, even when the font displays correctly on the published page. This makes it hard to lay out text accurately without previewing after every change.
This is a community workaround, not an official Unbounce feature. It only changes how fonts appear in your own browser while you edit and has no effect on your published page.
Preview your fonts with a CSS injection extension
Install a browser extension that lets you add custom CSS to a page. Several are available for Chrome and Firefox, and some save the CSS per domain so it stays in place between editing sessions. Paste your font's @font-face rules into the extension, for example:
@font-face {
font-family: 'Acrom-Regular';
src: url('https://yourfonthost.com/yourfont.woff2') format('woff2'),
url('https://yourfonthost.com/yourfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Once the rules are added, any text element that already uses the font renders with the correct typeface in the builder. To use custom fonts on your published page, see Using Custom Bespoke Fonts and @font-face in the Classic Builder.