UI Libraries & Design Systems
Adding your own custom font

A Comprehensive Guide to Using Custom Fonts in Locofy.ai

Learn how to apply your own fonts to designs in Locofy.ai and add a personal touch to your creations.

Gather Your Custom Fonts:

  • Ensure you have your desired custom font files saved on your local machine
  • Optionally, you can install the custom fonts on your system

Using Custom Fonts in Figma

To apply a custom font in Figma, open your design project and select the text element. Access the design properties panel, locate the font selection dropdown, and choose your desired custom font.

Preview the applied font by observing the selected text element, which should now reflect the custom font you have selected.

Syncing Design to Locofy.ai Builder

To sync your design from Figma to Locofy.ai Builder, click on Step 5: Sync to Locofy Builder (opens in a new tab) in the Locofy.ai plugin.

This will initiate the syncing process. Wait for the process to complete, and then click on "View Code in Builder". You will be redirected to the Locofy.ai Builder interface, where you can continue working on your design.

Adding Missing Fonts in Locofy.ai Builder

If you encounter a missing fonts error in Locofy.ai Builder, resolve it by clicking on "Resolve this issue in settings" within the builder interface.

This will open the font settings page in a new tab, where you can upload the missing font from your computer by selecting the "Upload from computer" option.

After the font upload is complete, save the changes by clicking the "Save" button. The missing font will now be accessible in the Locofy.ai Builder for your designs.

By following the steps in this guide, you can now add your personal touch and enhance your designs.