The Classic Builder editor does not always render custom @font-face fonts while you are working, even when the font displays correctly on the published page. That makes it hard to lay out text accurately without saving and 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 editing and has no effect on your published page.
Preview your fonts with a CSS-injection extension
Install a browser extension that lets you inject custom CSS into a page. Several are available for Chrome and Firefox, and some save the CSS per domain so it persists between editing sessions. Paste your font kit's @font-face rules into the extension's CSS panel, 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 injected, any text element that already references the font in its style renders with the correct typeface inside the editor. To apply custom fonts to your live page, see Using Custom Bespoke Fonts and @font-face in the Classic Builder.