use handwritten font for typed signature

Dockerfile

@@ -31,7 +31,7 @@ ENV BUNDLE_WITHOUT="development:test"
 
 WORKDIR /app
 
-RUN apk add --no-cache build-base sqlite-dev libpq-dev mariadb-dev vips-dev vips-poppler poppler-utils vips-heif libc6-compat ttf-freefont ttf-liberation && cp /usr/share/fonts/liberation/LiberationSans-Regular.ttf /usr/share/fonts/liberation/LiberationSans-Bold.ttf / && apk del ttf-liberation
+RUN apk add --no-cache build-base sqlite-dev libpq-dev mariadb-dev vips-dev vips-poppler poppler-utils vips-heif libc6-compat ttf-freefont ttf-liberation && mkdir /fonts && cp /usr/share/fonts/liberation/LiberationSans-Regular.ttf /usr/share/fonts/liberation/LiberationSans-Bold.ttf /fonts && apk del ttf-liberation && wget -O /fonts/DancingScript.otf "https://github.com/impallari/DancingScript/raw/master/fonts/DancingScript-Regular.otf" && wget -O /fonts/DancingScript-License.txt https://github.com/impallari/DancingScript/blob/master/OFL.txt
 
 COPY ./Gemfile ./Gemfile.lock ./
 
@@ -49,6 +49,7 @@ COPY LICENSE README.md Rakefile config.ru ./
 
 COPY --from=webpack /app/public/packs ./public/packs
 
+RUN ln -s /fonts /app/public/fonts
 RUN bundle exec bootsnap precompile --gemfile app/ lib/
 
 WORKDIR /data/docuseal

app/javascript/submission_form/signature_step.vue

@@ -99,6 +99,8 @@ import { IconReload, IconCamera, IconTextSize, IconArrowsDiagonalMinimize2 } fro
 import { cropCanvasAndExportToPNG } from './crop_canvas'
 import SignaturePad from 'signature_pad'
 
+let isFontLoaded = false
+
 export default {
   name: 'SignatureStep',
   components: {
@@ -184,6 +186,19 @@ export default {
       this.isUsePreviousValue = false
       this.isSignatureStarted = false
     },
+    loadFont () {
+      if (!isFontLoaded) {
+        const font = new FontFace('Dancing Script', `url(${this.baseUrl}/fonts/DancingScript.otf) format("opentype")`)
+
+        font.load().then((loadedFont) => {
+          document.fonts.add(loadedFont)
+
+          isFontLoaded = true
+        }).catch((error) => {
+          console.error('Font loading failed:', error)
+        })
+      }
+    },
     clear () {
       this.pad.clear()
 
@@ -199,8 +214,8 @@ export default {
       const canvas = this.$refs.canvas
       const context = canvas.getContext('2d')
 
-      const fontFamily = 'Arial'
-      const fontSize = '44px'
+      const fontFamily = 'Dancing Script'
+      const fontSize = '38px'
       const fontStyle = 'italic'
       const fontWeight = ''
 
@@ -218,6 +233,8 @@ export default {
         this.$nextTick(() => {
           this.$refs.textInput.focus()
 
+          this.loadFont()
+
           this.$emit('start')
         })
       }

config/environments/test.rb

@@ -66,4 +66,16 @@ Rails.application.configure do
     deterministic_key: 'test deterministic key',
     key_derivation_salt: 'test key derivation salt'
   }
+
+  config.middleware.use(Class.new do
+    def initialize(app)
+      @app = app
+    end
+
+    def call(env)
+      return [200, {}, []] if env['PATH_INFO'].starts_with?('/fonts')
+
+      @app.call(env)
+    end
+  end)
 end

lib/submissions/generate_audit_trail.rb

@@ -4,8 +4,8 @@ module Submissions
   module GenerateAuditTrail
     FONT_SIZE = 9
     TEXT_COLOR = '525252'
-    FONT_PATH = '/LiberationSans-Regular.ttf'
-    FONT_BOLD_PATH = '/LiberationSans-Bold.ttf'
+    FONT_PATH = '/fonts/LiberationSans-Regular.ttf'
+    FONT_BOLD_PATH = '/fonts/LiberationSans-Bold.ttf'
     FONT_NAME = if File.exist?(FONT_PATH)
                   FONT_PATH
                 else

lib/submissions/generate_result_attachments.rb

@@ -3,7 +3,7 @@
 module Submissions
   module GenerateResultAttachments
     FONT_SIZE = 11
-    FONT_PATH = '/LiberationSans-Regular.ttf'
+    FONT_PATH = '/fonts/LiberationSans-Regular.ttf'
     FONT_NAME = if File.exist?(FONT_PATH)
                   FONT_PATH
                 else