Walkthrough: Font mapping

For demo purposes, let's map a web font used by Auth0's Cosmos components to a completely different font in Figma. Ordinarily of course you would be mapping to the correct Figma font for your components. For this walkthrough we'll map to Happy Monkey so we can easily see the difference.

  1. After importing the cosmos components into Interplay, here is the Alert component as it normally appears in the browser:
  2. image
  3. From our knowledge of the component, or by inspecting the component in the browser we see that it is using the fakt-web font family.
  4. image
  5. Go to Project Settings > Fonts to access the font map
  6. Add a mapping to map fakt-web to another font in Figma, in this case Happy Monkey

  1. Like all edits, this edit of the Project settings is noted as a pending change on the Version History tab in Interplay:
  2. image
  3. We enter a description of the change and choose Commit Changes.
  4. When we use the component in Figma, we find it is now rendered using the Happy Monkey font:
  5. image