From 5181d024f74375c811c7bd94cdc2739a197c8022 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <Monkeychip@users.noreply.github.com>
Date: Fri, 23 Jul 2021 10:11:53 -0600
Subject: [PATCH] Add fallback font for masked-input (#12152)

* add fallback font for higher unicode coverage

* remove extra mixin and fix color issue that was not working on binary
---
 ui/app/styles/app.scss                     | 3 +++
 ui/app/styles/core/forms.scss              | 3 +--
 ui/public/fonts/text-security-square.woff2 | 3 +++
 3 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 ui/public/fonts/text-security-square.woff2

diff --git a/ui/app/styles/app.scss b/ui/app/styles/app.scss
index d8385bb21..476acbdfe 100644
--- a/ui/app/styles/app.scss
+++ b/ui/app/styles/app.scss
@@ -10,3 +10,6 @@
 }
 
 @include font-face('obscure');
+// Font comes from npm package: https://www.npmjs.com/package/text-security
+// We took the font we wanted and moved it into the ui/fonts folder
+@include font-face('text-security-square');
diff --git a/ui/app/styles/core/forms.scss b/ui/app/styles/core/forms.scss
index ceb3399d8..e4bb40e12 100644
--- a/ui/app/styles/core/forms.scss
+++ b/ui/app/styles/core/forms.scss
@@ -12,10 +12,9 @@ label {
 }
 
 .masked-font {
-  font-family: obscure;
+  font-family: obscure, text-security-square;
   font-size: $size-medium;
   letter-spacing: 2px;
-  color: $ui-gray-300;
 }
 
 .label {
diff --git a/ui/public/fonts/text-security-square.woff2 b/ui/public/fonts/text-security-square.woff2
new file mode 100644
index 000000000..1f14068ec
--- /dev/null
+++ b/ui/public/fonts/text-security-square.woff2
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fc74b05d439c450dd859cc04abbc76eac71bcb50bb8c491aef301a2ed44bd8c2
+size 760