How do I use a custom pixel font in Figma?
Create and download a pixel font, install its TTF on your computer, then select it for a Figma text layer. The desktop app can access local fonts; Figma in a web browser also needs its font installer for the local-font workflow.
Make a pixel fontCreate the font, then install it locally
Use pixelplease to choose a source, tune the grid, and download the ZIP. Extract and install the generated TTF. Figma supports TTF and OTF files, but the ZIP itself is not a font you can select.
The exported family starts with PixelPlease. Keep the full name or a screenshot of it so you can distinguish multiple variations. Your generated derivative is separate from the original Google Font that may already be available in Figma.
Add local fonts to Figma desktop or browser
Figma’s official font instructions distinguish the desktop app from the browser. The desktop app includes local-font access. On supported Mac and Windows browser setups, install Figma’s font installer, then reload open design files.
Create or select a text layer, open the font menu and look under Installed by you or search the PixelPlease family name. The local-font instructions do not provide the same support on Linux or ChromeOS. Figma also documents an account-upload workflow; use it only if available to your account and your license allows storing the font on that platform.
If Figma reports a missing font in an existing file, compare the requested family and style with the installed export. A newly generated variation can have a different family name. Install the exact shared font or deliberately select your replacement for the affected text layers; merely installing a similar-looking source font will not resolve the name mismatch.
Test editable text at the actual size
Write a real heading or button label instead of importing a screenshot of the generator. Check Il1 O0 rn m 0123456789, then the exact words used in the design. Try the intended size at 100% zoom before judging the result.
The current export is Basic Latin only, with no preserved kerning or ligatures. Unsupported characters can switch to a fallback or appear missing. If the shapes are correct but the edges look soft, use the rendering checklist.
Make the handoff explicit
Other editors need access to the same font and style. A Figma file link does not automatically grant your teammates a local font or the right to redistribute it. Include the generated package and source notices only when permitted; see font licensing.
Converting a final text layer to outlines can preserve its appearance for artwork, but removes normal text editing. Keep an editable original. The point of the TTF workflow is to retain reusable, editable typography wherever the font is available.