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