From 3d269df1a093ddb2444ba8f1cd2547fde486df5d Mon Sep 17 00:00:00 2001
From: Bob Develop <developbob50@gmail.com>
Date: Wed, 22 Apr 2026 06:37:46 -0400
Subject: [PATCH] feat(signature): multi-font typed signature (11 fonts)

---
 Dockerfile                                    | 17 ++++-
 .../submission_form/signature_step.vue        | 64 ++++++++++++++++---
 lib/submitters/generate_font_image.rb         | 23 ++++++-
 3 files changed, 93 insertions(+), 11 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index f8c4398f..9607801a 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -8,6 +8,16 @@ RUN apk --no-cache add wget && \
     wget https://github.com/impallari/DancingScript/raw/master/fonts/DancingScript-Regular.otf && \
     wget https://raw.githubusercontent.com/impallari/DancingScript/master/OFL.txt && \
     wget https://raw.githubusercontent.com/notofonts/noto-fonts/refs/heads/main/LICENSE && \
+    wget https://github.com/google/fonts/raw/main/ofl/greatvibes/GreatVibes-Regular.ttf && \
+    wget https://github.com/google/fonts/raw/main/ofl/pacifico/Pacifico-Regular.ttf && \
+    wget -O Caveat-Regular.ttf "https://github.com/google/fonts/raw/main/ofl/caveat/Caveat%5Bwght%5D.ttf" && \
+    wget https://github.com/google/fonts/raw/main/apache/homemadeapple/HomemadeApple-Regular.ttf && \
+    wget https://github.com/google/fonts/raw/main/ofl/mrssaintdelafield/MrsSaintDelafield-Regular.ttf && \
+    wget https://github.com/google/fonts/raw/main/ofl/shadowsintolight/ShadowsIntoLight-Regular.ttf && \
+    wget https://github.com/google/fonts/raw/main/ofl/alexbrush/AlexBrush-Regular.ttf && \
+    wget https://github.com/google/fonts/raw/main/ofl/kalam/Kalam-Regular.ttf && \
+    wget https://github.com/google/fonts/raw/main/ofl/sacramento/Sacramento-Regular.ttf && \
+    wget https://github.com/google/fonts/raw/main/ofl/herrvonmuellerhoff/HerrVonMuellerhoff-Regular.ttf && \
     wget -O /model.onnx "https://github.com/docusealco/fields-detection/releases/download/2.0.0/model_704_int8.onnx" && \
     wget -O pdfium-linux.tgz "https://github.com/bblanchon/pdfium-binaries/releases/latest/download/pdfium-linux-musl-$(uname -m | sed 's/x86_64/x64/;s/aarch64/arm64/').tgz" && \
     mkdir -p /pdfium-linux && \
@@ -79,13 +89,16 @@ COPY --chown=docuseal:docuseal ./tmp ./tmp
 COPY --chown=docuseal:docuseal LICENSE LICENSE_ADDITIONAL_TERMS README.md Rakefile config.ru .version ./
 COPY --chown=docuseal:docuseal .version ./public/version
 
-COPY --chown=docuseal:docuseal --from=download /fonts/GoNotoKurrent-Regular.ttf /fonts/GoNotoKurrent-Bold.ttf /fonts/DancingScript-Regular.otf /fonts/OFL.txt /fonts/LICENSE /fonts/
+COPY --chown=docuseal:docuseal --from=download /fonts/ /fonts/
 COPY --from=download /pdfium-linux/lib/libpdfium.so /usr/lib/libpdfium.so
 COPY --from=download /pdfium-linux/licenses/pdfium.txt /usr/lib/libpdfium-LICENSE.txt
 COPY --chown=docuseal:docuseal --from=download /model.onnx /app/tmp/model.onnx
 COPY --chown=docuseal:docuseal --from=webpack /app/public/packs ./public/packs
 
-RUN mkdir -p /app/public/fonts && ln -s /fonts/DancingScript-Regular.otf /app/public/fonts/ && \
+RUN mkdir -p /app/public/fonts && \
+    for f in DancingScript-Regular.otf GreatVibes-Regular.ttf Pacifico-Regular.ttf Caveat-Regular.ttf HomemadeApple-Regular.ttf MrsSaintDelafield-Regular.ttf ShadowsIntoLight-Regular.ttf AlexBrush-Regular.ttf Kalam-Regular.ttf Sacramento-Regular.ttf HerrVonMuellerhoff-Regular.ttf; do \
+      ln -s /fonts/$f /app/public/fonts/; \
+    done && \
     mkdir -p /usr/share/fonts/noto && ln -s /fonts/GoNotoKurrent-Regular.ttf /usr/share/fonts/noto/ && ln -s /fonts/GoNotoKurrent-Bold.ttf /usr/share/fonts/noto/ && fc-cache -f && \
     bundle exec bootsnap precompile -j 1 --gemfile app/ lib/ && \
     chown -R docuseal:docuseal /app/tmp/cache
diff --git a/app/javascript/submission_form/signature_step.vue b/app/javascript/submission_form/signature_step.vue
index c1f19be9..b0886baa 100644
--- a/app/javascript/submission_form/signature_step.vue
+++ b/app/javascript/submission_form/signature_step.vue
@@ -246,6 +246,27 @@
       type="text"
       @input="updateWrittenSignature"
     >
+    <select
+      v-if="isTextSignature && !modelValue && !computedPreviousValue"
+      v-model="selectedFont"
+      class="base-input mt-2 text-sm"
+      :aria-label="t('font')"
+      @change="onFontChange"
+    >
+      <option
+        v-for="f in availableFonts"
+        :key="f"
+        :value="f"
+      >
+        {{ f }}
+      </option>
+    </select>
+    <input
+      v-if="isTextSignature"
+      type="hidden"
+      name="signature_font"
+      :value="selectedFont"
+    >
     <select
       v-if="withSigningReason && !isOtherReason"
       class="select base-input !text-2xl w-full mt-6 text-center"
@@ -348,7 +369,21 @@ import FileDropzone from './dropzone'
 import MarkdownContent from './markdown_content'
 import { v4 } from 'uuid'
 
-let fontLoadPromise = null
+const SIGNATURE_FONTS = {
+  'Dancing Script': 'DancingScript-Regular.otf',
+  'Great Vibes': 'GreatVibes-Regular.ttf',
+  'Pacifico': 'Pacifico-Regular.ttf',
+  'Caveat': 'Caveat-Regular.ttf',
+  'Homemade Apple': 'HomemadeApple-Regular.ttf',
+  'Mrs Saint Delafield': 'MrsSaintDelafield-Regular.ttf',
+  'Shadows Into Light': 'ShadowsIntoLight-Regular.ttf',
+  'Alex Brush': 'AlexBrush-Regular.ttf',
+  'Kalam': 'Kalam-Regular.ttf',
+  'Sacramento': 'Sacramento-Regular.ttf',
+  'Herr Von Muellerhoff': 'HerrVonMuellerhoff-Regular.ttf'
+}
+
+const fontLoadPromises = {}
 
 const scale = 3
 
@@ -465,7 +500,9 @@ export default {
       isUsePreviousValue: true,
       isTouchAttachment: false,
       isTextSignature: !this.signatureSrc && (!!this.signatureText || this.field.preferences?.format === 'typed' || this.field.preferences?.format === 'typed_or_upload'),
-      uploadImageInputKey: Math.random().toString()
+      uploadImageInputKey: Math.random().toString(),
+      selectedFont: 'Dancing Script',
+      availableFonts: Object.keys(SIGNATURE_FONTS)
     }
   },
   computed: {
@@ -606,18 +643,29 @@ export default {
       this.isUsePreviousValue = false
       this.isSignatureStarted = false
     },
-    loadFont () {
-      if (!fontLoadPromise) {
-        const font = new FontFace('Dancing Script', `url(${this.baseUrl}/fonts/DancingScript-Regular.otf) format("opentype")`)
+    async onFontChange () {
+      await this.loadFont()
+      if (this.$refs.textInput && this.$refs.textInput.value) {
+        this.updateWrittenSignature({ target: this.$refs.textInput })
+      }
+    },
+    loadFont (name) {
+      const fontName = name || this.selectedFont
+      const file = SIGNATURE_FONTS[fontName]
+      if (!file) return Promise.resolve()
+
+      if (!fontLoadPromises[fontName]) {
+        const ext = file.endsWith('.otf') ? 'opentype' : 'truetype'
+        const font = new FontFace(fontName, `url(${this.baseUrl}/fonts/${file}) format("${ext}")`)
 
-        fontLoadPromise = font.load().then((loadedFont) => {
+        fontLoadPromises[fontName] = font.load().then((loadedFont) => {
           document.fonts.add(loadedFont)
         }).catch((error) => {
           console.error('Font loading failed:', error)
         })
       }
 
-      return fontLoadPromise
+      return fontLoadPromises[fontName]
     },
     showQr () {
       this.isShowQr = true
@@ -684,7 +732,7 @@ export default {
       const canvas = this.$refs.canvas
       const context = canvas.getContext('2d')
 
-      const fontFamily = 'Dancing Script'
+      const fontFamily = this.selectedFont
       const initialFontSize = 44
       const fontStyle = 'italic'
       const fontWeight = ''
diff --git a/lib/submitters/generate_font_image.rb b/lib/submitters/generate_font_image.rb
index b70d7450..f82e39dd 100644
--- a/lib/submitters/generate_font_image.rb
+++ b/lib/submitters/generate_font_image.rb
@@ -7,12 +7,33 @@ module Submitters
 
     FONTS = {
       'Dancing Script Regular' => '/fonts/DancingScript-Regular.otf',
+      'Great Vibes Regular' => '/fonts/GreatVibes-Regular.ttf',
+      'Pacifico Regular' => '/fonts/Pacifico-Regular.ttf',
+      'Caveat Regular' => '/fonts/Caveat-Regular.ttf',
+      'Homemade Apple Regular' => '/fonts/HomemadeApple-Regular.ttf',
+      'Mrs Saint Delafield Regular' => '/fonts/MrsSaintDelafield-Regular.ttf',
+      'Shadows Into Light Regular' => '/fonts/ShadowsIntoLight-Regular.ttf',
+      'Alex Brush Regular' => '/fonts/AlexBrush-Regular.ttf',
+      'Kalam Regular' => '/fonts/Kalam-Regular.ttf',
+      'Sacramento Regular' => '/fonts/Sacramento-Regular.ttf',
+      'Herr Von Muellerhoff Regular' => '/fonts/HerrVonMuellerhoff-Regular.ttf',
       'Go Noto Kurrent-Bold Bold' => '/fonts/GoNotoKurrent-Bold.ttf'
     }.freeze
 
     FONT_ALIASES = {
       'initials' => 'Go Noto Kurrent-Bold Bold',
-      'signature' => 'Dancing Script Regular'
+      'signature' => 'Dancing Script Regular',
+      'Dancing Script' => 'Dancing Script Regular',
+      'Great Vibes' => 'Great Vibes Regular',
+      'Pacifico' => 'Pacifico Regular',
+      'Caveat' => 'Caveat Regular',
+      'Homemade Apple' => 'Homemade Apple Regular',
+      'Mrs Saint Delafield' => 'Mrs Saint Delafield Regular',
+      'Shadows Into Light' => 'Shadows Into Light Regular',
+      'Alex Brush' => 'Alex Brush Regular',
+      'Kalam' => 'Kalam Regular',
+      'Sacramento' => 'Sacramento Regular',
+      'Herr Von Muellerhoff' => 'Herr Von Muellerhoff Regular'
     }.freeze
 
     module_function