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
