Add your fonts before pasting

If you paste converted code into Webflow and the text suddenly looks like Arial, this is why.

Webflow only keeps fonts your site knows

When elements are pasted into the Designer, Webflow checks each class's font family against the fonts available on the site. If the first font in the stack isn't available, the whole font-family declaration is dropped, and the text falls back to the site's default font.

In our tests, a fresh Webflow site kept these without any setup:

• Arial, Georgia, Verdana, Tahoma, Times New Roman, Trebuchet MS
• system-ui
• Montserrat, Open Sans and Lato

Anything else — Inter, DM Sans, Poppins, your brand font — needs to be added first.

How to add a font

1. In the Designer, open Site settings → Fonts.
2. Under Google Fonts, search for the family (for example Inter) and add the weights your design uses.
3. For a custom font, upload the font files under Custom fonts.
4. Save changes, go back to the Designer, then paste.

The converter's report tells you which fonts to add after each conversion.

What about system font stacks?

AI tools often write stacks like -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif. The converter maps these to system-ui, which Webflow keeps and which renders as the same native system font. Helvetica stacks are mapped to Arial, Webflow's closest built-in match.

Monospace text

Webflow has no monospace font available by default. If your design has code snippets, add a monospace Google Font such as Inconsolata or JetBrains Mono before pasting.