Excalidraw localized deployment

1 - Introduction to Excalidraw

Excalidraw is an open source, compact and easy-to-use handwriting style drawing board software.
excalidraw official website address: https://excalidraw.com/

2 - Excalidraw localized installation (git method)

2-1 Installation and deployment

In the terminal, enter:

git clone https://github.com/excalidraw/excalidraw.git

After the installation is complete, in the terminal, enter the project file

cd excalidraw/

2-2 Install dependent environment-nodeJS

NodeJS download address:
nodejs download: http://nodejs.cn/download
Insert image description here
Download the pkg package and continue to the next step until completed.

Verify whether nodeJS is installed successfully (on terminal)

which node

Output: Indicates successful installation

/usr/local/bin/node

2-3 Install dependent environment-brew

Execute the command to install brew and enter the command from the official website into the terminal, that is:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

2-4 Install dependent environment - yarn

brew install yarn

In this directory (cd excalidraw/), run yarn

3 - Start Excalidraw

cd excalidraw/
yarn start

3-1 Modify font

After downloading the font directly, rename it to: Virgil.woff2 and overwrite it directly.

3-2 Download woff2 font

First download the free ttf font.
Ttf free font download address: https://www.fonts.net.cn/commercial-free/fonts-zh-1.html

Then convert ttf font to woff2 font.
Convert ttf font to woff2 font: https://www.toolnb.com/tools/fonttowoff2.html

3-3 Excalidraw replaces handwritten fonts

3-3-1｜Copy fonts to folder

Open the directory public, place the woff2 font in this directory, and name it: MyFonts.woff2
Insert image description here

3-3-2｜Modify public/fonts.css

In public/fonts.css, add the following code (copy it directly)

@font-face {
    
    
  font-family: "MyFonts";
  src: url("MyFonts.woff2");
  font-display: swap;
}

3-3-3｜Modify public/index.html

Modify public/index.html and add the following code to the head tag:

    <link
      rel="preload"
      href="MyFonts.woff2"
      as="font"
      type="font/woff2"
      crossorigin="anonymous"
    />

3-3-4｜Modify src/constants.ts

Modify src/constants.ts and add font variables. Here MyFonts font is used instead of Virgil font:

export const FONT_FAMILY = {
    
    
  Virgil: 1,
  Helvetica: 2,
  Cascadia: 3,
};
// 变更为
export const FONT_FAMILY = {
    
    
  MyFonts: 1,
  Virgil: 4,
  Helvetica: 2,
  Cascadia: 3,
};

3-3-5｜Modify src/actions/actionProperties.tsx

Modify src/actions/actionProperties.tsx and replace the use of fonts:

{
    
    
    value: FONT_FAMILY.Virgil,
    text: t("labels.handDrawn"),
    icon: <FontFamilyHandDrawnIcon theme={
    
    appState.theme} />,
}
// 变更为
{
    
    
    value: FONT_FAMILY.MyFonts,
    text: t("labels.handDrawn"),
    icon: <FontFamilyHandDrawnIcon theme={
    
    appState.theme} />,
}