Font management in Penpot is particularly different from other design tools. It is also an area that we are kinda proud of because of its simplicity and how well it is working so far. However, we suspect that Custom fonts at Penpot are not as well known as they should be, so here I am writing about it.
Why custom fonts at Penpot
Penpot provides by default the Google Fonts catalog with a wide range of free and open source standard font families that can be accessed from the fonts list at the text options. Sounds good, right? But what if I own a certain font family that I definitely need to use in my designs?
“What can I do if I want to use a font that is not included in the fonts list?”. This is a question that many users raised immediately after Penpot was published in its first alpha version (February '21, good old times!). A couple examples of requests are this and this, but we have many more. We had enough evidence that not being able to use your own fonts was a show-stopper for a significant number of designers (it seems so obvious now…). So we listened and also assumed that we had failed to give proper importance to a need that we had already considered anyway (we have proof, there was already a story in our project backlog). Given all that, we reprioritized, defined, designed and developed a solution to be launched 3 months later.
The task
The goals that the first version of Penpot’s custom fonts had to meet were basically:
- Allow users to upload local fonts so that they appear in the file fonts list.
- Allow users to group uploaded font variants so that they appear as one font family in the file fonts list. Font variants must be manageable as font styles.
- Ensure that the solution encourages appropriate uses of the licensed fonts that are uploaded and also discharge Penpot of any responsibility for misuse.
Where can custom fonts be managed?
We looked for a simple and effective solution. At first we considered allowing users to manage custom fonts from the file’s workspace. Handy! At the time of prototyping, we found that the context could imply that the font management was done at the level of each file, a perception that we wanted to avoid at all costs. That’s why we discarded this first option and decided to have a separate section in the team dashboard, so that there would be no doubt about the level at which this management is being done. If you upload a font, you should not fail to know that all team members will be able to use it in every project, right?
The mechanics
To upload custom fonts we designed a pretty standard CRUD. A big green button highlights the main action and the rest goes as expected. The challenge came at the moment of grouping the families. We went through iterations and iterations until we arrived at a solution that seemed obvious. Using the font family names to automatically group them fits almost all use cases. Downloaded font files are almost always named in a manageable way. We designed it so you can also change the font names after they are uploaded just in case you need to make adjustments. We tested this behavior before publishing it (as we always do should) but still weren’t sure if this was going to work for every user. No complaints so far.
If you want more (boring) details about how Custom fonts work at Penpot, you can take a look at its User Guide section.
Encouraging proper license use
How do we encourage the proper use of licensed fonts and discharge Penpot from further responsibility in case of misuse? We placed a disclaimer at a very prominent place at the fonts section so you just can’t miss it. Billboard design. There we encourage users to respect font licenses, providing general information (like the wonderful H&Co FAQs) and a link to our Terms of Service. We could had just assumed that an uploaded font falls under the “User Content” category, but in order to be extra-explicit we’ve added an specific section (“6.5 Fonts Licensing and Usage”) to clarify the user’s responsibility at the moment of uploading and using a font at Penpot.
Results
Since the first version of custom fonts was published to the day of publication of this post, 28,423 fonts have been uploaded to Penpot by users. Those are metrics from the SaaS instance (penpot.app) and we have no way to know the numbers from the self-hosted instances (SaaS x2 would be a very conservative estimation). Custom fonts are being broadly used among Penpot users and we are hardly having complaints and bug reports related, so yeah!
Next steps
That first Custom fonts version have already had some improvements like the fonts filter, the “Upload all” button and a lot of look & feel tweaks. However, we have a ton of other ideas to improve this area. For instance we still want to implement the flow to maintain custom fonts references when moving files between teams (a lot of plumbing to be done here).
There is another feature already designed and ready to be developed (waiting to fit into one of our prioritizations): Font services. The ability to add and manage more providers in addition to the Google Fonts one might help designers to connect and manage not only single fonts, but whole collections. At this link you can see a design that represents the idea. If you have a Penpot account you can leave comments there, you are more than welcome to do it.
Did you already know about Penpot custom fonts? What do you think about it? We’d love to know your thoughts!
