How to Import a Website with Custom Fonts into Figma Using HTML.to.design

To import a website with custom fonts into Figma using html.to.design, open the plugin, paste a public page URL into its Web tab, choose import settings, and import. If the page is private or behind a login or VPN, capture it with the html.to.design browser extension while signed in, then transfer that capture to the plugin. If the font is missing in Figma, use the plugin’s missing-font alert and download option, install the font on your computer, and confirm Figma recognizes it.

html.to.design converts web pages into editable Figma layers and can create local text and color styles. The steps below cover public pages, private pages, local files, font installation, and common import problems. See the html.to.design overview.

1. Choose the right import route

Situation	Route	What to know
Public website URL	Plugin’s Web tab	Paste the URL, set import options, and import.
Page requires login, VPN, or a browser session	Browser extension capture	Sign in and open the page first, capture it, then transfer the capture to the plugin. You can also download a local `.h2d` file.
Saved HTML or archive	Plugin’s File tab	Supported formats include `.html`/`.htm`, `.zip`, `.mhtml`/`.mht`, and `.h2d`. External resources may not load if unavailable.

For an ordinary public page, start with the Web tab. Use browser capture if access depends on your signed-in browser or the saved page cannot resolve its resources. The official guides explain web imports, private-page capture, and local file imports.

2. Import a public website

Open the html.to.design plugin in Figma.
Select the Web tab.
Paste the full URL of the page you want to reproduce.
Choose the available import settings for the result you need.
Start the import and inspect the resulting layers and text in Figma.

Import the specific page rather than assuming the whole site will be included. If the target page is behind authentication, use the private-page workflow instead of expecting a public URL fetch to inherit your browser session.

Check the text after import

Inspect a representative text layer and its font in Figma. A page can import while its custom typeface remains unavailable locally; in that case Figma may report a missing font or render text using a substitute. The font troubleshooting steps below address that separately from the page capture.

3. Import a private page

Install the html.to.design browser extension.
In that browser, sign in and navigate to the page you need, including any required VPN or authenticated session.
Use the extension to capture the page.
Transfer the capture to the html.to.design plugin in Figma and import it.
If needed, download the capture as a local .h2d file and import that file through the plugin.

This route captures a page available in your browser session. It is useful when a direct public URL cannot access the content. Follow your organization’s access rules and the website’s terms when capturing private content.

4. Fix a missing custom font

Look for the missing-font alert in the plugin and use its font download option if offered.
Install the downloaded font on the computer where you use Figma. Follow the operating system’s normal font installation process.
Reopen or refresh Figma as needed, then check the font dropdown on the imported text layer.
Confirm that Figma lists the intended font and that the imported text renders as expected.

Downloading a font is a technical step, not a grant of permission to use it. Make sure you have the right to use and share the font under its applicable license. For a team-wide font installation, the html.to.design documentation says an organization admin can upload the font.

Missing your website’s font? Check its internal name

A font may appear to be installed but still show as missing if the name used by the website differs from the name Figma recognizes. The plugin uses the font name rendered in the code. In Chrome developer tools, inspect the text and check Rendered Fonts to identify the font actually used by the browser. Then compare that name with the choices in Figma’s text font dropdown. The html.to.design missing fonts guide describes this check.

html.to.design says imported text is saved as vector paths, so others viewing the design can see the text properly rendered even if they do not have the font installed. That supports viewing the imported appearance; it does not mean collaborators can edit the text using the same font without access to it.

5. Import a local HTML file

Open the plugin’s File tab and choose a supported local file, such as .html, .htm, .zip, .mhtml, .mht, or .h2d. Check the imported page for missing images, styles, or scripts.

An HTML document can point to external images, CSS, or JavaScript that are absent from the file or unavailable to the importer. If those resources fail to load, the import can look incomplete. Use the browser extension to capture the page when the resources are available in the browser but not in the local file import. See the local-file instructions.

6. Troubleshooting

Symptom	Likely cause	Fix
The page cannot be imported from its URL	The page requires a login, VPN, or browser session.	Sign in in the browser, capture with the extension, then transfer the capture to the plugin.
The imported page is missing images or styling	A local HTML file references external resources that are not present or publicly accessible.	Use browser capture when those resources load in the signed-in browser, or ensure the referenced resources are available to the importer.
Figma reports a missing font although it seems installed	The website’s rendered font name may not match the name Figma recognizes, or Figma may not yet see the installation.	Check Chrome’s Rendered Fonts, compare with Figma’s font dropdown, and confirm the font is installed on the device.
The imported text looks right to a viewer but is not editable in the expected font	Vector paths preserve appearance for viewing; they do not install the font for collaborators.	Install or provide the properly licensed font to people who need to edit using that typeface.
The plugin cannot access a private page through a pasted URL	A pasted URL does not carry the authenticated browser session.	Use the extension capture while signed in; import its capture or downloaded `.h2d` file.

7. Practical checks before relying on the import

Confirm you imported the intended page and state, especially for pages that vary by account or session.
Check representative headings, body text, and any distinctive custom-font text in Figma.
Verify images and styling when importing local files; external references can be unavailable.
If others must edit text with the same typeface, arrange licensed font access rather than relying on vector-path appearance alone.
For organization-wide use, ask an organization admin about uploading the font.

Or skip the browser setup

If your goal is to capture the page as an image for a Figma reference, ScreenshotNeo is a website screenshot API and MCP server. It returns PNG, JPEG, WebP, or PDF from one GET request. It does not turn a screenshot into editable Figma layers, so use html.to.design when editable page structure is the goal.

cURL:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

Node.js:

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const bytes = new Uint8Array(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', bytes));

See the ScreenshotNeo API documentation for request options and formats. Cookie banners, popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed, and response headers report the page verdict and billing status. An MCP server lets AI agents use screenshot tools. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. Sign up for free ScreenshotNeo screenshots.

FAQ

Can I import a website without installing its font?

Yes. The imported text can be saved as vector paths for correct viewing, but editing with the same typeface requires access to a font Figma recognizes.

Use its browser extension while signed in, then transfer the capture to the plugin or save it as a .h2d file.

Does importing a font mean I can use it commercially?

No. Import and installation instructions do not change the font’s license. Check that you have the rights needed for your use.

Can ScreenshotNeo create editable Figma layers?

No. ScreenshotNeo captures an image or PDF. Use html.to.design when you need the page represented as editable Figma layers.