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 Name | Numeric 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 modified 1yr ago