How to use a custom font on Excalidraw.com

Introduction

Excalidraw is a great whiteboarding tool, useful for technical diagrams and wireframes.

Problem

The default handwritten font looks quite unprofessional and can be difficult to read

Additionally, there is no official way to add custom fonts.

Solution

The solution is to run a custom script on every page load to override the default fonts.

1. Download the "scripty" chrome extension

You can download the extension here

This will allow you to inject custom js on specific web pages.

2. Configure automatic script injection

Once you have scripty installed, create a new script and configure it to run automatically when the URL contains https://app.excalidraw.com/

3. Add custom font script

Write a script to override one of the Excalidraw default fonts with your chosen font

(() => {

  console.log("Custom font script started");



  // Add the font-face definition

  const style = document.createElement("style");

  style.textContent = `

  @font-face {

    font-family: 'Helvetica';

    font-display: swap;

    src: url(https://fonts.gstatic.com/s/shantellsans/v9/FeVhS0pCoLIo-lcdY7kjvNoQg2xkycTqsuA6bi9pTt8YiT-NXidjb_ee-maigL6R8nKVh8BbE1mv4wwMMm1lebY.woff2) format('woff2');

  }

  `;

  document.head.appendChild(style);

  console.log("Custom font added");

})();

At the time of writing, the default fonts are:

Handdrawn = 'Virgil'

Normal = 'Helvetica'

Code = 'source-code-pro'

4. Bonus tip: using google fonts

Find your font in google fonts, click on embed code, and under the web tab select the @import option

The problem here is that google fonts default import url will set the font name to be the real name of the font.

We want to manually alter the name of the font to override the fonts in excalidraw.

To achieve this, you can navigate to the font url in the browser eg visit https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap

From here you can copy the entire css, paste it into vs code, and use find/replace to change all the font names .

For example, to replace the default handdrawn font (Virgil) with a custom handdrawn font (Shantell Sans), you can use the link above, copy all the CSS and change the name from 'Shantell Sans' to 'Virgil' to trick Excalidraw into replacing the fonts.

Now add this code into the script provided above and youre ready to go.

Here is the script for a fully working example https://pastebin.com/raw/1LULgXuX

Conclusion

This article provides you with everything you need to implement a custom font in Excalidraw.

I hope that someone finds this useful