How to find the fonts on a Squarespace, Wix, Webflow or Framer site

First, work out which builder made the site

You found a portfolio or a studio site with type you love, and you want it on your own site. The font name is only half of what you need. The other half is knowing which builder the site runs on, because that tells you where the font probably came from. A font from a builder’s own library is a couple of clicks away if you use the same builder. On a different platform you may need a license and an upload.

Right-click the page, choose View page source and use the browser’s find box. Three of the four builders sign their work in a generator meta tag near the top. All four load files from domains that give them away.

While you are there, check that the words you care about are live text. Try to select a few letters with your cursor. If they highlight one by one, everything below works. If the whole headline moves as one block, it is a picture, and you need a tool that identifies fonts from images instead.

Identify the font, whatever the builder

The identification step is the same on all four platforms, because they all ship ordinary HTML and CSS. Here is the manual route in Chrome, Edge or Brave.

1. Right-click the heading or paragraph you like and choose Inspect. The Elements panel opens with that element selected.
2. In the side pane, switch to the Computed tab and find font-family. That is the list of fonts the site asked for, in order of preference.
3. Scroll to the bottom of the Computed tab. The Rendered Fonts section names the font the browser is actually drawing, and says whether it came from the network or from your computer.
4. Open the Network panel, filter by Font and reload the page. Each row is one font file, and its address tells you who hosts it.

Builder sites produce deep, machine-written markup, so you often land on a wrapper and not on the text itself. If font-family looks wrong, click one level deeper in the Elements tree. The full walkthrough is in how to find a font with Chrome DevTools.

The faster route: click the text

With Font Inspector, click the toolbar icon and choose Pick text on page, or press Alt + Shift + F (Option + Shift + F on Mac). Hover the text and click it. If you land on a wrapper, the ↑ and ↓ keys move to the parent or child element. The panel shows the family, the font actually rendered, the source, the weight, the size, the line height, the letter spacing and the colors. It works inside iframes and embedded frames too. If the page was open before you installed the extension, refresh it once.

To see every family at once, open Fonts on this page. It ranks the families by how much text uses each one. More in how to see all fonts on a page.

Squarespace: Google and Adobe fonts are built in

Squarespace’s help center says its font picker includes 600 Google fonts and 1,000 Adobe fonts. That is why so many Squarespace sites load type from use.typekit.net, the Adobe Fonts domain, even when the owner has never had a Creative Cloud plan. If the font you identified is served by Google Fonts or Adobe Fonts and you are on Squarespace too, search for it by name in your own picker first.

On version 7.1, open the Site styles panel and click Fonts. You can choose a font pack, which sets matching heading and body fonts in one step. For finer control, click the arrow next to Fonts and pick Headings, Paragraphs, Buttons or Miscellaneous. Each one lets you set the font, weight, style, line height, letter spacing, text transform and size. Adobe families sit behind the Additional Fonts option in the font list.

Upload a font you have licensed

1. Open the Site styles panel and click the arrow next to Fonts.
2. Click a font format, such as Headings, Paragraph or Buttons.
3. Click the font dropdown menu, then click the upload icon.
4. Drag the file into the upload area, or click + and select it.

Squarespace accepts .otf, .ttf, .woff and .woff2 files. Variable fonts with several weights are supported, but a single file that holds several styles is not, so upload the italic separately. Your uploads then appear under Uploaded in every font dropdown. On version 7.0 the same upload icon sits in the font dropdown of any font tweak.

Wix: a licensed library that stays inside Wix

Fonts from the Wix library load from static.parastorage.com, under a path that contains /fonts/. Fonts the owner uploaded load from static.wixstatic.com, under a path that contains ufonts, and the file itself usually has a generic name. So on Wix, take the family name from Rendered Fonts or from the inspector panel, not from the file name.

One detail matters more here than on the other builders. Wix states that it holds the licenses for the fonts in its editor, and that they are for digital use only and within your Wix site. The library includes commercial typefaces alongside open ones. If you spot one on a Wix site, you can use it on your own Wix site, but not on another platform or in print. For that you need your own license, as covered in font licensing explained.

To change fonts across your whole site in the Wix Editor, click Site Design on the left side of the editor, then Text theme, and choose a Heading Font and a Paragraph Font. Every text element that uses those theme styles updates with it.

Upload a font you have licensed

1. Click a text element in the editor, then click Edit Text.
2. Click the Fonts drop-down, then click Upload Fonts.
3. Choose your file. Wix accepts TTF, OTF, WOFF and WOFF2, and recommends WOFF2.
4. Click Done. The font now appears under My Fonts in the Fonts drop-down of any text element.

Wix notes that uploaded fonts cannot be used in the Wix Blog and in some apps. In the Wix Studio editor, select the text, open the Inspector, scroll to Design, open the Font drop-down and use the upload link at the bottom of the list.

Webflow: the source code lists the Google fonts for you

Webflow adds Google fonts through the Google Fonts API, and it leaves a readable trace. Search the page source for WebFont.load. It lists every Google family the site loads, with the weights after a colon, for example Inconsolata:400,700.

Custom uploads are just as easy to read. They load from cdn.prod.website-files.com, and the file keeps its original name after a short code, so a file ending in BrandSans-Medium.woff2 tells you the family and the weight. Adobe Fonts can be connected too, with an API token from an Adobe account. Webflow says that integration needs a paid Workspace or site plan.

Add the font to your own Webflow site

1. Open Site settings and go to the Fonts tab. You can also choose Add fonts from the Font dropdown in the Style panel, which takes you to the same place.
2. For a Google font, use the Google fonts section: choose the family, choose the variants you need and click Add font.
3. For a licensed font, scroll to Custom fonts and upload the files. Webflow accepts WOFF2, WOFF, TTF, OTF, EOT and SVG, recommends WOFF2, and limits each file to 4MB. Check the family name, weight and style it detected for each file.
4. Reopen or refresh the Designer. The font is now in the Style panel under Typography, in the Font dropdown, grouped by source.

Webflow says you do not need a paid plan for Google fonts or for custom uploads. It also warns that its Google integration sends visitors’ IP addresses to Google, and recommends uploading the font under Custom fonts instead if that concerns you. Background: Google Fonts, GDPR and self-hosting.

Framer: hashed file names, so trust the family name

Framer’s font picker has tabs for Google, Fontshare and Custom fonts, and new text starts in the built-in Inter. On published sites we saw Google families load from fonts.gstatic.com, and everything else load from framerusercontent.com under /assets/. Those files have random-looking names, so the address tells you nothing about the typeface. Read the family from Rendered Fonts or from the inspector panel.

Once you have the name, check Google Fonts and Fontshare first. If the family is in either library, it is already in your Framer picker. If it is in neither, the site owner uploaded it, and it is most likely a commercial font.

Upload a font you have licensed

1. Add a text layer to your project and select it.
2. Open the font picker in the right panel and go to the Custom tab.
3. Click Upload Fonts and select the file from your computer.
4. When the upload finishes, select the font from the Custom tab.

Framer recommends .woff2 files, and its help center advises against uploading desktop OTF and TTF files, because a desktop license usually does not cover web use. To apply the font across the site, edit your text styles: open Assets in the left sidebar and look under Styles. A change to a text style updates every layer that uses it.

License the font, then match the details

All four builders say the same thing in their upload instructions: only upload fonts you have the right to use. Identifying a font is always fine. Publishing a site with it is a licensing question. Google fonts are open source and safe. A commercial typeface needs a web font license from the foundry or a reseller. Never download the font files from the other site’s server and upload them to yours. They are easy to reach, but that does not make them yours.

If the original is out of budget, look for an open typeface with similar proportions. Font Inspector suggests free look-alikes for popular paid fonts, and our free alternatives pages list them by font. Similar is not identical, so set your own headline in the candidate before you commit.

Then match the rest of the look. Note the weight, size, line height and letter spacing of the heading and the body text, as described in how to find font size and line height. If a builder asks for a ratio and you have pixels, the line height calculator converts one to the other.