Previewing with Custom Fonts
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
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.