Fix displayed identical fonts in sign PDF (#2751)

# Description of Changes

### Changes:
- Add a new custom select to display fonts correctly and to allow more
styling flexibility in Sign PDF feature by hiding the original
`<select>` element (`display: none;`) and wrap it with a `<div>` and
then create a custom selection menu using `<div>`s and CSS to achieve
the required results due to the limitations of `<select>` and `<option>`
while still preserving the hidden `<select>` for form submission.

### Why was the change made?
1. A bug that caused font families to not be displayed in Firefox.
2. Select/Option element are not flexible when it comes to styling
(compared to DIVs for example) but bullet point `1.` is of higher
priority.

### UI Changes:
- Dark Mode:
   - Before:

![image](https://github.com/user-attachments/assets/37f79c81-8155-4430-9e36-2b4cc2a442e6)

   - After:

![image](https://github.com/user-attachments/assets/e6a2b209-0d8f-4ff2-94ea-54827706d0cd)

- Light Mode:
   - Before:

![image](https://github.com/user-attachments/assets/c5356899-6be9-497b-8ad9-d50e6bd077d5)

   - After: 

![image](https://github.com/user-attachments/assets/29373b1a-cfa1-48a2-9040-3ed2fd5f7fd3)

Note:
- Changes in `sign.js` are between the lines 95-228, as it seems the
file was auto-formatted affecting whitespaces and
single_quotes/double_quotes.


#### Useful quotes from MDN:

> [Styling with
CSS](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#styling_with_css)
Styling the <option> element is highly limited. Options don't inherit
the font set on the parent. In Firefox, only
[color](https://developer.mozilla.org/en-US/docs/Web/CSS/color) and
[background-color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)
can be set, however in Chrome and Safari it's not possible to set any
properties. You can find more details about styling in [our guide to
advanced form
styling](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling).

#### Useful references:
- [Option
Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#styling_with_css)
- [Select
Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)
- [Advanced Form
Styling](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling)

Closes #1575

---

## Checklist

### General

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md)
(if applicable)
- [x] I have performed a self-review of my own code
- [x] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [x] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [x] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing)
for more details.

src/main/resources/templates/sign.html

@@ -15,7 +15,8 @@
 
       #font-select option[value="[[${font.name}]]"] {
         font-family: "[[${font.name}]]",
-        cursive;
+        cursive
+        !important;
       }
     </style>
   </th:block>
@@ -133,10 +134,12 @@
                 <label class="form-check-label" for="sigText" th:text="#{text}"></label>
                 <textarea class="form-control" id="sigText" name="sigText" rows="3"></textarea>
                 <label th:text="#{font}"></label>
-                <select class="form-control" name="font" id="font-select">
-                  <option th:each="font : ${fonts}" th:value="${font.name}" th:text="${font.name}"
-                    th:class="${font.name.toLowerCase()+'-font'}"></option>
-                </select>
+                <div id="signFontSelection" class="custom-select form-control">
+                  <select class="form-control" name="font" id="font-select">
+                    <option th:each="font : ${fonts}" th:value="${font.name}" th:text="${font.name}"
+                      th:class="${font.name.toLowerCase()+'-font'}"></option>
+                  </select>
+                </div>
                 <div class="margin-auto-parent">
                   <button id="save-text-signature" class="btn btn-outline-success mt-2 margin-center"
                     onclick="addDraggableFromText()" th:text="#{sign.add}"></button>