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!
This is why we’ve just introduced the whole variety of new fonts to the application – now you can choose from the multitude of wonderful fonts to juice up your design!
Customize your Font Library
Before you start working on a new project in UXPin, you can now customize your Font Library and choose a specific set of fonts to use in your prototype and speed up your designing.
First, select the text element. Then, click on the dropdown with the list of available fonts in the Typography section in the Properties panel.
On the UXPin desktop app, the dropdown lets you filter all your fonts by: Local, Google, Uploaded and Typekit (Adobe fonts). You can also click on Manage fonts in the dropdown and further manage all your font categories.
Manage your fonts
However, it’s just a tip of the iceberg – you can, of course, customize your Font Library even further. If you want to prepare a custom list, just open the drop-down and choose Manage fonts menu to open Font Management dialog box.
Here you’ll find multiple options to prepare perfect solutions for your project. As you can see, the dialog box again consists of 5 sections: All selected fonts, Local fonts, Google fonts, Typekit and Uploaded fonts. Here you can preview all the fonts using 2 different display modes for a better perspective.
In the All selected fonts view, you’ll see all the fonts and styles added to your Font Library (visible in the dropdown with fonts in the editor). The default list is quite extensive, but you can easily remove some fonts from it and add the new ones to create your personal font settings to use within the project. Of course, you’ll be able to update it anytime!
If you want to remove a specific font from the list, hover over the green tick icon in the right upper corner. It’ll instantly change into red sign icon – just click it and a font will automatically disappear from this section.
You can also remove fonts from the Local fonts section! If you decide to do it, the font won’t disappear from the list – a tick icon will simply change into a plus icon. This way you’ll be able to add it again in the future just with one click.
Library fonts and Project fonts
Since UXPin is a collaboration tool, we are well prepared to address all the challenges of teamwork. This is why each member of the account can customize the Fonts Management section according to their needs – there are no limits here!
We distinguish here between Library fonts, so all the fonts added to your library in the Font Management dialog box and Project fonts, so all the fonts used by you and your teammates 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 proper notification for 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 specific project.
If the font your colleague used is a custom font then check out this tutorial for details.
If you want to use this font in other projects as well, you can, of course, add it to your list – it’s enough to click a small plus sign next to it and you are all set here!
Please note, that 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.
You can use all local fonts on your computer in your designs, but there are 3 cases to remember:
Using local fonts
While the UXPin desktop app has access to all local fonts installed on your computer, the web version works a little bit different. It lists only local fonts common for most operating systems because it doesn’t have access to the local fonts on your computer. With that said, you can preview prototypes and edit the text with your installed local font online, but you won’t be able to set that font on a different text element.
Please keep in mind that you cannot add and remove fonts in the Fonts Management. It’s also impossible to add or remove the style of a local font.
If you want to share a preview of your prototype with someone, make sure they have the font you used inside the editor on their computer. In this case, you have 2 options:
- Upload the font file via custom font upload (in WOFF format)
- Send the font file to the recipient of the preview link and make sure they install it.
Thanks to that, the design is going to render correctly and they will see things as you’ve designed them. In case the recipient doesn’t have it installed, we will replace the font with Arial and inform them about it.
Since exporting your designs to PNG and PDF takes place on the UXPin servers, they don’t have access to your local fonts. It means that the prototypes with local fonts will use Arial instead. In case of missing local fonts during an HTML export, these fonts will also be replaced with Arial.
UXPin is also fully integrated with Google fonts, so you can let your designer’s imagination run free and make a good use of them!
To access Google fonts, you just need to open the Font Management dialog box again and go to Google fonts section.
Here you’ll find the whole list of Google fonts and will be able to add them to your 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.
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 also a special sorting system to help you search for your favorite fonts easier and faster. It’s enough to choose specific categories and the system will display only those fonts.