Previewing with Custom Fonts

When you bring your design from Figma into Quest, we preview a live react version of that component so there’s no question about how the end product will look. That content in the center panel is the real, live version of how it will render in the browser and represents the real UI for your product. We match any Google Fonts you may have used in your Figma design and display them accordingly. However, if your design consists of custom fonts in the Figma file, Figma can’t automatically send those to us for a host of reasons, so you will need to add your custom fonts to your account inside Quest.

To do so, navigate to the β€œApp Settings” tab. From there you’ll see the β€œDisplay Fonts” section and the β€œImport Font” button.

Clicking this button will launch the dialog that allows you to import the custom font you want and assign it a Font Family and Font Weight. First, select the font in the weight you want from your local computer. You will need to import every font weight individually into Quest rather than the font family so we can be sure to label and set the weight to match the Figma file accordingly.

Font Family:

To find the exact font family name and font weight, you can check the font in the design in Figma. In the β€œText” settings, the font family name is the first field you see. In this example image above, β€œSinkin Sans” is the font family name. You don’t need to specify anything else.

Font Weight:

Quest needs the font weight number. Do not use the inspect panel in Figma as it is often wrong and tries to guess this number. Please use the mapping below to find the number you need. If it doesn’t come through correctly, it may be off by 100 +/- but this mapping will get it right for you 95% of the time.

Font Weight NameNumeric Value

Thin

100

ExtraLight

200

Extralight

200

UltraLight

200

Ultralight

200

β€œExtra Light”

200

β€œUltra Light”

200

β€œExtra light”

200

β€œUltra light”

200

Light

300

Regular

400

Normal

400

Medium

500

SemiBold

600

DemiBold

600

Semibold

600

Demibold

600

β€œSemi Bold”

600

β€œDemi Bold”

600

β€œSemi bold”

600

β€œDemi bold”

600

Bold

700

ExtraBold

800

UltraBold

800

Extrabold

800

Ultrabold

800

β€œExtra Bold”

800

β€œUltra Bold”

800

β€œExtra bold”

800

β€œUltra bold”

800

Black

900

Heavy

900

β€œ100”

100

β€œ200”

200

β€œ300”

300

β€œ400”

400

β€œ500”

500

β€œ600”

600

β€œ700”

700

β€œ800”

800

β€œ900”

900

If using a condensed font or italic font, you can simply repeat the process with the same font family name and weight that may be identical to regular font you may have already uploaded. Just be sure you import the font file that is indeed italics or condensed and it will work.

Again, you would repeat this process for all the font families and individual weights you used in your design. This is a one time setup for your account and will work across all components and team members on your account. By doing this one time setup, now all designs you import will accurately match how it will look for your React web product.

Adding custom fonts is purely optional. If your design looks good and is using a Google Font, you're not required to import that Google Font.

Last updated