How do I add a custom font in Webflow?

Choose who serves the font

You can add a font from Google, or you can upload font files and serve them with the site. Neither path needs a paid Site plan or a paid Workspace plan.

The Google fonts integration uses the Google Fonts API, which sends visitor IP addresses to Google. If you do not want the published site to request fonts from Google, download the files and upload them under Custom fonts. That is the path Webflow recommends when you want to avoid that request.

Fonts already available in the Designer, such as Lato and Varela, do not appear in the Google fonts list under Site settings. You can still choose them in the Font dropdown. They are separate from fonts you add yourself.

Add a Google font

Open Site settings, then the Fonts tab, then Google fonts. Choose the font. Choose the variants you will actually use, such as one regular weight and one bold weight, and any languages or scripts you need. You can change that selection later. Click Add font.

You can start from the Designer instead. Open the Font dropdown in the Style panel and choose Add fonts. That takes you to the same Fonts tab.

Load the Designer again, or refresh it if it was already open. Select a heading. In the Style panel, under Typography, open Font. Fonts you added through the integration are listed under Google fonts.

Upload the files yourself

Open Site settings, Fonts, and scroll to Custom fonts. Upload the files there. Each file can be up to 4 MB. Webflow accepts WOFF2, WOFF, TTF, OTF, EOT, and SVG. WOFF2 is the format it recommends. Webflow describes WOFF2 as up to 50% smaller than TTF or OTF, which can reduce bandwidth from custom fonts, with faster load times and support in modern browsers. Variable fonts are supported in TTF, OTF, WOFF, and WOFF2. They are not supported in EOT or SVG.

Read the font license first. You need permission to use that font on the site.

If the font is also in Webflow's default Google library, such as Montserrat or Roboto, rename each file before you upload it. Montserrat-Regular can become Montserrat-Regular-Local. Do that for every weight. If the name matches the Google font, Webflow may keep loading the font from Google's servers.

Upload each weight as its own file, or upload one variable font. Use the same font family name on every file from that family so the Designer groups them. Set the weight and the style on each file. You can edit those later, and you can delete an upload.

Webflow creates a fallback for each family. If a browser does not load your file, it uses that fallback, and you can change which font it is. The font display setting controls how the face loads against fonts the browser already has. Set it to swap when you want a system font to show right away, so text does not stay invisible while your file arrives.

Reopen the Designer. Under Typography, Font, uploaded files are listed under Custom fonts. Apply the family to one text element, to a parent element, or to an HTML tag if every H1 should share it.

Example: the site needs one heading face in regular and bold. Upload two WOFF2 files, give both the same family name, set the two weights, set font display to swap, and apply the family to the H1 tag.

Check the published page

The Designer can show a font before visitors can. Publish the site, open the live page, and look at a heading that should use the new family. If it still looks like the old font, confirm you edited the class that heading uses, then publish again.

A font that only appears in the Designer is not done. The check is the published page.

Remove a font only after styles stop using it

Deleting a font under Site settings does not take it off the published site by itself. The CSS keeps referencing it until every use is gone. For a Google font, the API script also keeps loading. Text that still points at a deleted Google font renders as Times New Roman.

For a Google font, open the Style selectors panel and search the font name. That search includes styles on the main breakpoint. A font applied only on another breakpoint will not appear, so check those breakpoints yourself. For an uploaded font, search the font name in the Style manager. The list shows classes and HTML tags that use it.

Change those classes and tags to another font, or remove the elements and clean up unused classes. Then go to Site settings, Fonts, and click Delete next to the font. Republish.

To see whether a Google font is still requested, open the published site in Chrome, right-click, choose Inspect, open the Network tab, and refresh. If webfont.js is in that list, the Google Fonts API script still loaded. If it is not there, that request did not run.