GUIDE · FONTS
Why fonts change
after import.
A LilLabr capture records every text run’s family, weight and size, but not the font files. Here is how the paste route and the plugin find the right font, when text falls back to Inter, and how to put the original back in Figma.
What the capture records.
Every text block becomes one text layer, and every run inside it carries the family, weight, italic, size, line height, letter spacing, color, underline or strikethrough and text-transform the browser used. A CSS font stack is recorded with the one family that rendered; a stack made only of generics such as system-ui is recorded as that generic.
The font files themselves are never embedded in the clipboard payload or the .labr file. Figma has to find the family on its own, and when it cannot, text wraps differently.
The paste route.
To let Figma measure the text the way the browser did, LilLabr fetches font files while it prepares the clipboard payload for a capture, not when you paste. It uses the files the page declares first, from the page’s own font hosts, and asks jsDelivr for Fontsource’s copies of Google Fonts to check that the family is one Figma can load, or to stand in when the page declares none. A family that is on Fontsource arrives measured correctly; a family that is not falls back to Inter. These requests happen only on the paste route: opening a downloaded .labr file in the plugin’s Import a file tab contacts neither the page’s hosts nor jsDelivr, and the plugin reads the archive without any network.
The plugin route.
Before import, the file view in the plugin’s Import a file tab names any family the capture uses that Figma does not have (the line reads “Fonts · … unavailable in Figma”); a Google Font counts as available even when it is not installed on this computer. During import, the plugin loads the same family from Figma’s font list when it is installed locally or is a Google Font. Otherwise it uses the closest weight of Inter, then Roboto, and lists the substitution in its log. For a generic system-ui, the plugin asks Figma for the UI font of the platform that captured the page: SF Pro on macOS, Segoe UI on Windows, Roboto on ChromeOS and Android. The paste route labels such text Inter. A weight whose style name is spelled differently by its foundry (Apple’s “Semibold”, Google’s “SemiBold”, Figma’s “Semi Bold”) still matches the right weight at import.
| Font | Paste route | Plugin route |
|---|---|---|
| A Google Font | Measured from the page’s files or Fontsource’s copy on jsDelivr; Figma has it. | Loaded from Figma’s font list. |
| A font installed on this computer, not on Google Fonts | Falls back to Inter. | Loaded from Figma’s font list, which includes installed fonts. |
| A web font the site serves itself, not installed, not on Google Fonts | Falls back to Inter. | Closest weight of Inter, then Roboto, noted in the log. |
Put the original font back in Figma.
- Install the font on the computer that runs Figma, or confirm it is available in Figma’s font list. Figma Desktop sees locally installed fonts; the browser version needs Figma’s font installer.
- Select one substituted text layer, then use Figma’s Select all with same font from the Edit menu to pick every layer that fell back.
- Set the family in the Text panel. Figma then re-measures the text with that family. Weight, size, line height and letter spacing were recorded from the browser, so compare the wrapping with the source page rather than expecting an exact match.
- Check headings and buttons, where a fallback with different metrics shows most. Not every wrapping change is a font problem: the verified sample on this site used Inter, and its header wrapping still needed tidying after paste.
Avoid it next time.
- For a brand font, install it on the Figma machine before you import; the plugin then loads it from Figma’s font list.
- For Google Fonts, both routes handle the family without any setup.
- For a quick check, read the file view in the plugin’s Import a file tab before you press Import into Figma: its fonts line names the missing fonts, so you can install them and import once.
- Wrapping that changed although the family is right can mean a different weight loaded. Compare the weight in the Text panel with the capture’s run.
Related: the plugin’s options and log, the full property map, and other things that look wrong after import.