Mapping missing fonts before import

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:

• mapping the missing fonts to specific ones before import. Learn more
• or update/replace the fonts used after import. Learn more

Mapping the missing fonts with a specified font before import

Open the settings interface as shown in the screenshots below, and turn on “Mapping Missing Fonts Before Import” option.

This way, the next time you import a page, if there are missing fonts, a pop-up will appear first, allowing you to choose which font to use as a replacement.

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.