Fonts

We live in the world of words so it’s no wonder that designers need to use written messages in their everyday work. In UXPin we believe that it’s not only what you write but also how you write it.

Customizing the Font Library

Before you start working on a new project in UXPin, you can customize your font library (visible in the dropdown with fonts in the Editor) and choose a specific set of fonts to use in your design. Select the text element, click on the dropdown with the list of fonts in the Typography section to the right in the Properties panel.

The dropdown lets you filter all your fonts by: All, Local, Google, and Uploaded. You can also click on Manage fonts in the dropdown and further manage all font categories.

Managing Fonts

To manage your fonts, open the fonts library and choose Manage fonts. This will open the Fonts Management modal.

It consists of 4 font sections: All selected, Google, Typekit and Uploaded. You can preview all fonts using 2 different display modes, list and grid.

The All selected view shows all the fonts and styles added to your font library. You can, of course, add and remove fonts to create your personal font settings.

Removing Fonts

To remove a font from the list hover over the green tick icon in its right upper corner. It’ll instantly change into a red sign icon. Click it to remove the font.

Library Fonts and Project Fonts

Since UXPin is a collaboration tool, each member of the account can customize the Fonts Management section. We distinguish here 2 types of fonts:

Library fonts – all the fonts added to your library in the Font Management dialog box.

Project fonts – all the fonts used by you and your team in the project.

So what happens when your colleague used a font which is not added to your library?

In such case, you’ll see a notification on each page in your prototype and we’ll automatically add this font to your font library as a project font. This way you’ll be able to display all the text elements properly and use the font within this project. To use this font in other projects, just add it to your list.

Note

If one of your coworkers adds or removes a font in the Font Management section, the change will be visible for all the users within the project.

Google Fonts

Google fonts are available in the Font Management in the Google fonts section. To add them to your fonts library just choose a specific font and click the plus sign in the right upper corner – the font will be added to your fonts library right away and it’ll be marked with a green tick sign.

Adding Styles

You don’t need to add all styles of a given font – you can choose only one or two which suit your needs best! Just hover over the number of styles to see a list of them and simply tick the ones you’d like to add.

Since Google fonts is an extensive resource, apart from the regular Search, we’ve incorporated a sorting system to help you search for your favorite fonts easier. It’s enough to choose specific categories and the system will display only those fonts.

Custom Fonts

Adding Custom Fonts

To upload a custom font in UXPin:

Select a text element on the canvas and go to the Font Management dialog box in the Typography section, click Uploaded and then Upload a font.

Name your font, choose a style from the list and upload the appropriate file to the app in the WOFF format.

You can choose multiple styles and upload all of them at once.

You can choose multiple styles and upload all of them at once.

Note

Remember to check the box to confirm that you have all the legal rights to use the font in your designs.

Editing and Removing Fonts

To edit a font, go to the Uploaded section in the Font Management and click Edit in the top left corner of an uploaded font.

You can change the name of the whole font or specific styles. But remember that those changes will affect all elements edited with a given font – they’ll be automatically displayed with a different font or the most similar style of the custom font used.

To remove a specific style of a font, click the Remove font style icon visible next to the style’s name. To delete the entire font, hover over the icon in the left top corner and choose Remove.

Sharing Fonts

In UXPin we understand how important it is for design teams to keep track of all the changes made in the prototype. So what happens when someone on your team removes the custom font or one of its styles from the account? In such case, we’ll automatically update all the text elements where the font was used – those elements will be displayed as Arial font, if the whole font was removed, or as the most similar style of the font if the actual one is deleted.

What if the font is uploaded again after a while? If you didn’t edit those text elements, they’ll be automatically displayed properly again.

You’ll also see a notification for each page so that you can locate all affected elements easily.

You’ll also see a notification for each page so that you can locate all affected elements easily.