Missing fonts

If the correct font hasn’t been installed, the plugin will display the following alert anytime you import a webpage with that font:

If the plugin displays this Missing fonts alert but you do have the correct font installed, you might want to check:

• The internal name of the font which is rendered in your code.
• If Figma recognizes this font.

One important thing to understand is that only the user importing the webpage and currently using html.to.design actually needs to have the font installed. Others, even if using the designs later on, do not need it because Figma uses a clever system where the text’s vector paths are saved, allowing them to see the text properly rendered, even without installing the font beforehand.

What font is my webpage using?

The font name html.to.design instructs Figma to use is the internal name of the font rendered within code. This is because Figma is not aware of font-family mappings used on the page and uses font names which appear inside font files. These names can be found in DevTools such as Chrome’s. Here is an example - check out the Rendered Fonts section:

Now that you know the font name you are using, we can check if that font is available in Figma.

Checking the font is available in Figma

Head to any text in Figma, and look for the Text section:

Then check if the font is available in the dropdown list:

If the font is not listed, then it is not available. The font needs to be installed. One option is to install the font locally, another is to install it to your organization if you have access to it.