Custom fonts at Penpot

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!

12 Likes

I like being able to have custom fonts! It’s one of my favourite Penpot features :blush:

I do wish I could upload my fonts from the design canvas, though. Realizing that a font is missing while designing, and then having to leave the canvas, go to the Font Manager, and then make my way back can feel inefficient, especially in the early stages of design brainstorming.

I’ve also had some issues with how custom fonts display, and with text elements in general (although, I believe I’ve filed those bugs already).

2 Likes

This looks so promising!! Can’t wait to try it out.

1 Like

Yeah I know it can be a bit disrupting for your workflow, specially in early stages of the design. I really think that we will do this eventually but we have to ensure that its UX will give a clear idea about where and to whom the fonts are going to be available.

Good to know that there’s interest! We have not had many requests for this but this does not mean that it won’t be very very useful for certain designers. We definitelly want to do it but the small detail of coding the feature is still missing :sweat_smile: