Varia: introduce new font-family mixin and rename the old one

varia/sass/base/legacy/_copy.scss

@@ -15,7 +15,7 @@ blockquote {
 	cite {
 		font-size: $font__size-xs;
 		font-style: normal;
-		@include font-family( $font__heading ); // For browsers without support for CSS variables.
+		@include font-family-old( $font__heading ); // For browsers without support for CSS variables.
 		font-family: var( --font-headings, $font_heading );
 	}
 }

varia/sass/base/legacy/_headings.scss

@@ -24,7 +24,7 @@ h3,
 h4,
 h5,
 h6 {
-	@include font-family( $font__heading ); // For browsers without support for CSS variables.
+	@include font-family-old( $font__heading ); // For browsers without support for CSS variables.
 	font-family: var( --font-headings, $font_heading );
 }
 
@@ -53,7 +53,7 @@ h6 {
 }
 
 .page-title {
-	@include font-family( $font__body ); // For browsers without support for CSS variables.
+	@include font-family-old( $font__body ); // For browsers without support for CSS variables.
 	font-family: var( --font-base, $font_body );
 }
 

varia/sass/base/legacy/_mixins-master.scss

@@ -116,6 +116,11 @@
 }
 
 /* Ensure all font family declarations come with non-latin fallbacks */
-@mixin font-family( $font_family: $font__body ) {
+@mixin font-family-old( $font_family: $font__body ) {
 	font-family: $font_family;
 }
+
+@mixin font-family( $config_map ) {
+	font-family: #{map-deep-get( $config_map, 'fallback' )}; // For browsers without CSS custom properties support.
+	font-family: var( #{map-deep-get( $config_map, 'css-var')}, #{map-deep-get( $config_map, 'fallback' )} );
+}

varia/sass/base/legacy/_typography.scss

@@ -7,7 +7,7 @@ body {
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	color: $color__text-main;
-	@include font-family( $font__body ); // For browsers without support for CSS variables.
+	@include font-family-old( $font__body ); // For browsers without support for CSS variables.
 	font-family: var( --font-base, $font_body );
 	font-weight: 400;
 	font-size: 1em;
@@ -22,7 +22,7 @@ select,
 optgroup,
 textarea {
 	color: $color__text-main;
-	@include font-family( $font__body ); // For browsers without support for CSS variables.
+	@include font-family-old( $font__body ); // For browsers without support for CSS variables.
 	font-family: var( --font-base, $font_body );
 	font-weight: 400;
 	line-height: $font__line-height-body;