Add fallback font for masked-input (#12152) (#12158)

Monkeychip · web-flow · commit 43cfab4684bc · 2021-07-23T10:33:02.000-06:00
* add fallback font for higher unicode coverage

* remove extra mixin and fix color issue that was not working on binary
diff --git 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
@@ -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

Original file line number	Diff line number	Diff line change
`@@ -10,3 +10,6 @@`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`@include font-face('obscure');`
	`13`	`+// Font comes from npm package: https://www.npmjs.com/package/text-security`
	`14`	`+// We took the font we wanted and moved it into the ui/fonts folder`
	`15`	`+@include font-face('text-security-square');`
Original file line number	Diff line number	Diff line change
`@@ -12,10 +12,9 @@ label {`
`12`	`12`	`}`
`13`	`13`
`14`	`14`	`.masked-font {`
`15`		`- font-family: obscure;`
	`15`	`+ font-family: obscure, text-security-square;`
`16`	`16`	`font-size: $size-medium;`
`17`	`17`	`letter-spacing: 2px;`
`18`		`- color: $ui-gray-300;`
`19`	`18`	`}`
`20`	`19`
`21`	`20`	`.label {`