How Do I Add Fonts to a Webflow Site?

Webflow gives you three separate ways to add a font — a Google Fonts integration, an Adobe Fonts connection, or uploading your own font file — and only one of the three, Adobe Fonts, requires a paid plan. All three end up in the same place: the Font dropdown in the Style panel, grouped by source (Google fonts, Adobe fonts, Custom fonts). Here's how each route works, what formats Webflow accepts for an upload, and the licensing responsibility Webflow puts squarely on you, sourced from Webflow's Help Center, checked September 2026.

How do I add Google Fonts to a Webflow site?

From the Style panel's Font dropdown, choosing "Add fonts" takes you to Site settings > Fonts tab, where Google Fonts is one of the three sections. Webflow's Help Center gives the exact steps: "Go to Site settings > Fonts tab > Google fonts," choose the font, then "choose the variants (e.g., weight, italics, etc.), languages, and scripts you want to include on your site," and click "Add font" (Webflow Help Center, "Add Google Fonts", checked September 2026). Webflow states plainly: "You do not need a paid Site or Workspace plan to use Google fonts." Fonts you add this way appear in the Designer under "Google fonts" in the Font dropdown, alongside the smaller set of Google fonts (like Lato and Varela) that are built into Webflow by default and don't need adding separately.

One privacy detail worth knowing before you add one: Webflow's Add Google Fonts article flags that "Webflow's Google font integration requires the use of the Google Fonts API, which sends End User IP addresses to Google servers and may not be GDPR-compliant." Its own recommended workaround is to skip the integration and self-host instead: "we recommend downloading fonts from Google and uploading them in Site settings > Fonts tab > Custom fonts" — the same upload path covered below, using files sourced from Google's own font library.

How do I add Adobe Fonts, and which plan does it need?

Adobe Fonts works differently — it's a licensed connection to your own Adobe Creative Cloud account, not a free catalog like Google Fonts, and Webflow gates it accordingly. Webflow's Help Center states the requirement directly: "To integrate Adobe Fonts into any site, you need a paid Workspace plan or paid site plan" (Webflow Help Center, "Integrate Adobe Fonts into a Workspace", checked September 2026). That's the one font source on this page that isn't free at every tier.

The setup runs through an API token rather than a font picker: create web projects in your own Adobe Fonts account, generate an API token from Adobe, then paste it into Webflow (Integrate Adobe Fonts into a Workspace) at "Workspace settings > Integrations tab > Adobe fonts," and connect a specific web project to each site under "Site settings > Fonts tab > Adobe fonts." Webflow's troubleshooting note explains why a connected font can stop working later: "Adobe Fonts are licensed through your Adobe Creative Cloud subscription. If you remove your web project from your Adobe Fonts library, or your Adobe account becomes inaccessible, your font selection might not load." The font isn't stored on Webflow's side — it streams through your live Adobe license, so losing that subscription removes the font from your site too.

How do I upload a custom font file?

If your typeface isn't on Google Fonts or in your Adobe Fonts library, Webflow lets you upload the actual font file directly, and — like Google Fonts — this route needs no paid plan. Webflow's Help Center states it plainly: "You do not need a paid Site or Workspace plan to upload custom fonts" (Webflow Help Center, "Upload custom fonts", checked September 2026). The path is the same starting point as Google Fonts — Font dropdown > Add fonts > Site settings > Fonts tab — but you scroll to "Custom fonts" and upload the file yourself rather than searching a catalog.

One naming detail matters if your custom font shares a name with something already in Webflow's default library: "If you upload a custom font that's also present in Webflow's default Google Fonts library (like Montserrat or Roboto), rename it to something unique — otherwise, Webflow may continue loading the font from Google's servers." Do this for every weight and style you upload, not just the first one.

Once uploaded, Webflow auto-generates a fallback for each font family — used if a visitor's browser fails to load your custom font — and you can also set the font's display behavior, which controls how it loads relative to what the browser has already cached. Webflow's own tip: "Setting font display settings to swap can prevent a flash of invisible text when pages load by using a system font."

What font formats does Webflow accept?

Webflow's upload article lists six accepted formats: "WOFF2, WOFF, TTF, OTF, EOT, SVG." Not all of them are treated equally, though — Webflow's own recommendation is specific: "We recommend uploading your custom fonts in WOFF2 (Web Open Font Format 2.0) format," citing smaller file sizes ("up to 50% smaller than TTF or OTF"), faster load times, and broad modern-browser support. If your only copy of a font is in another format, Webflow points to a third-party converter rather than offering one itself: "you can use tools like Font Squirrel Webfont Generator (Expert mode) to convert it to WOFF2."

Two upload details matter for a family with several weights or styles. First, a size cap: "You are able to upload a maximum file size of 4MB per font file." Second, Webflow supports two approaches: "you can upload multiple instances of a font and select a different font weight and style for each instance, or you can upload variable fonts, which include all variations (e.g., weight, width, etc.) in a font family's range" — with one condition on the multiple-instance route: "make sure to use the same font family for all of the instances of the same font." Variable fonts bundle every weight and width into one file, but only in some formats: "Webflow supports variable fonts in TTF, OTF, WOFF, and WOFF2 formats. Webflow doesn't support variable fonts in EOT and SVG formats at this time."

What should I know about font licensing before I upload one?

Webflow puts this responsibility on you, not on itself. Its upload article states: "Please read your font's license agreement and make sure you have permission to use the font on your site before you upload it." The upload will succeed regardless of whether you're actually licensed to use the font on a live website, so this is a step to handle before publishing, not something Webflow's interface checks for you. A font that's free to use in a design file or a mockup isn't automatically licensed for a published website — that's a separate check against the font's own license terms, whether it came from a foundry, a marketplace, or a design tool.

Which plan do I actually need?

If your project can use a Google Fonts typeface, or you can license and upload a font file yourself, you never need to upgrade a plan just for fonts. Adobe Fonts is the one route that assumes you're already paying for something — both Adobe's own subscription and a paid Webflow plan.

How do I remove a font without breaking the page?

Deleting the entry in Site settings alone doesn't finish the job. Webflow's custom-fonts article is explicit: "Deleting a custom font from Site settings > Fonts tab alone will not remove the custom font from your site. The custom font will continue to show up in your site's published CSS until you remove all instances of the custom font from your site" (Webflow Help Center, "Upload custom fonts," checked September 2026). The recovery path is to find every class or element still using that font first (Webflow's Style selectors panel can search by font name), reassign or delete those instances, and only then delete the font entry itself and republish. The Google Fonts article documents the same pattern with a visible failure mode if you skip that order: "Any typography elements that reference the deleted font will render as Times New Roman on the published site" (Webflow Help Center, "Add Google Fonts", checked September 2026).

Where does Figment fit in?

Not directly — Figment isn't a Webflow tool, and it has no Fonts tab, Google Fonts integration, or Adobe Fonts connection of its own. Figment publishes a website from a Figma design through its Figma plugin, so font choices are made in Figma before publishing, and what renders on the live site depends on whether that typeface can actually load in a browser — a different problem from Webflow's plan-and-upload system above. If a Figma-sourced font looks right in the design but wrong on the published page, our guide to Figma fonts not working on a live site covers how to diagnose it. If your site lives on Squarespace instead, our Squarespace fonts guide covers that platform's separate font-pack-and-upload system.

Bottom line: Webflow's three font routes aren't gated the same way — Google Fonts and custom font uploads both work on any plan, including free, while Adobe Fonts needs a paid Workspace or Site plan because it's tied to your own Adobe Creative Cloud license. Custom uploads accept WOFF2, WOFF, TTF, OTF, EOT, and SVG, with WOFF2 recommended and a 4 MB per-file cap, and licensing permission is entirely your responsibility to confirm before you publish — Webflow's interface won't check it for you.