[Brand update] Replace font with proxima-vara in Woo screens (#98454)

* Enhance typography styles by adding Proxima Vara font and updating font-family settings for Woo

* Add 'woocommerce.com' to Content Security Policy media sources in index.js

* Update font

client/layout/masterbar/woo.scss

@@ -92,6 +92,7 @@ $breakpoint-mobile: 660px;
 	--woo-purple-50: #7f54b3;
 	--woo-purple-60: #674399;
 	--woo-purple-70: #533582;
+	--woo-font-family-header: proxima-nova, sans-serif;
 	$woo-label-color: #50575e;
 	$woo-gray-100: #101517;
 	$woo-gray-40: #787c82;
@@ -111,10 +112,6 @@ $breakpoint-mobile: 660px;
 	background: #fff;
 	min-height: 100%;
 
-	* {
-		font-family: proxima-nova, sans-serif;
-	}
-
 	&.layout.is-section-login {
 		min-height: 100%;
 		padding-bottom: 0;
@@ -1285,10 +1282,15 @@ $breakpoint-mobile: 660px;
 		}
 
 		h1,
+		h2,
 		h3 {
-			color: var(--studio-gray-100);
+			font-family: var(--woo-font-family-header);
 			font-feature-settings: "ss01" on, "salt" on;
-			font-family: proxima-nova, sans-serif;
+		}
+
+		h1,
+		h3 {
+			color: var(--studio-gray-100);
 			text-align: center;
 			font-size: 2.25rem;
 			font-weight: 700;
@@ -1724,9 +1726,8 @@ $breakpoint-mobile: 660px;
 			margin-top: 0;
 
 			h1.magic-login__form-header {
+				font-family: var(--woo-font-family-header);
 				color: var(--studio-gray-100);
-				font-feature-settings: "ss01" on, "salt" on;
-				font-family: proxima-nova, sans-serif;
 				text-align: center;
 				font-size: 2.25rem;
 				font-weight: 700;
@@ -2248,6 +2249,13 @@ $breakpoint-mobile: 660px;
 	--woo-purple-50: #720EEC;
 	--woo-purple-60: #6108CE;
 	--woo-purple-70: #5007AA;
+	--woo-font-family-header: proxima-vara, 'Proxima Fallback', sans-serif;
+
+	h1,
+	h2,
+	h3 {
+		font-feature-settings: "ss04";
+	}
 
 	.masterbar__woo {
 		.masterbar__woo-nav {

client/server/pages/index.js

@@ -542,6 +542,7 @@ function setUpCSP( req, res, next ) {
 			'*.wp.com',
 			'https://fonts.gstatic.com',
 			'use.typekit.net',
+			'https://woocommerce.com',
 			'data:', // should remove 'data:' ASAP
 		],
 		'media-src': [ "'self'" ],

packages/typography/styles/woo-commerce.scss

@@ -1,5 +1,22 @@
 @import "./variables";
 
+
+/* Proxima Vara Font */
+@font-face {
+	font-display: swap;
+	font-family: proxima-vara;
+	font-style: normal;
+	font-weight: 400 700;
+	src: url(https://woocommerce.com/wp-content/themes/woo/fonts/proxima-vara/ProximaVara.woff2) format('woff2 supports variations'), url(https://woocommerce.com/wp-content/themes/woo/fonts/proxima-vara/ProximaVara.woff2) format('woff2-variations');
+}
+
+@font-face {
+	ascent-override: 95%;
+	font-family: 'Proxima Fallback';
+	size-adjust: 99.9%;
+	src: local('Arial');
+}
+
 $woo-title-font: "Proxima Nova", $sans;
 
 $woo-font-headline-large: rem(54px);