diff --git a/ui/app/styles/app.scss b/ui/app/styles/app.scss
index d8385bb21d916..476acbdfe3a74 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 ceb3399d87d34..e4bb40e127448 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 0000000000000..dcf806952bb2f
Binary files /dev/null and b/ui/public/fonts/text-security-square.woff2 differ