How to install custom fonts

In this guide you will learn how to install custom fonts for SnailyCADv4

1. Download the font

You must download your font as a .woff2 or .ttf type. These are the latest web font types.

2. Install the font

Once you've downloaded your font, it needs to be placed in a special folder: ./apps/client/public/fonts.

info

If the ./apps/client/public/fonts folder does not exist yet, you can create it. Once created, place your font in the ./apps/client/public/fonts folder.

3. Add required CSS to use the font

We must now edit some code to include this font in the client. Open the file: apps/client/src/styles/fonts.scss.

Now add the following to the file:

@font-face {
  font-family: "MyFontNameHere";
  src: url("../../public/fonts/MyFontNameHere.woff2");
  font-display: swap;
}

Once you've added the font-face to the file, we must now update the old font name to the new font name. Search for:

html,
body,
#map-calls,
.leaflet-container {
  font-family: "Assistant", sans-serif;
}

and Replace with:

html,
body,
#map-calls,
.leaflet-container {
  font-family: "MyFontNameHere", sans-serif;
}

4. Rebuild your SnailyCAD instance

Standalone

If you are running SnailyCAD standalone, you can run the following command to rebuild the client:

pnpm run build

Docker

If you are running SnailyCAD with Docker, you can run the following command to rebuild the client:

docker compose -f production.docker-compose.yml build

5. Start your SnailyCAD instance

Standalone

If you are running SnailyCAD standalone, you can run the following command to start SnailyCAD:

pnpm run start

Docker

If you are running SnailyCAD with Docker, you can run the following command to start SnailyCAD:

docker compose -f production.docker-compose.yml up -d