Advanced Import: Mapping missing fonts

Note

Many websites use web fonts that are not available on your computer. These fonts fall into two categories:

• regular text fonts
• icon fonts created by the web designers themselves.

When encountering fonts that are not available on your local computer, the HTML to Figma plugin will substitute them with Figma's default fonts. In most cases, the result is quite satisfactory. However, you can:

• In Advanced import mode, you will be prompted to replace missing fonts.Learn more

• or update/replace the fonts used after import. Learn more

Before starting Advanced import, replace missing fonts

Before starting Advanced import, if there are missing fonts, the system will pop up a dialog box prompting you to choose a replacement font.

You can also install missing fonts

Although, based on experience, you usually do not need to install these fonts in most cases, you may want to consider downloading and installing them in the following two situations.

1. You specifically need the style of a certain font from the original webpage and are willing to load that font file into your own product.
2. You notice that some icons are missing on the imported page and suspect that these icons come from a missing font.

Note

Once you install the missing fonts from a specific page, you won’t be prompted for them the next time you import the same page.

How to download and install these missing fonts

Click “Download missing fonts” in the screenshot above to download all fonts from the current page. Click the link afterwards to open Figma’s official font installation tutorial.