Varia: migrate font-family mixin

varia/sass/base/legacy/_copy.scss

@@ -15,7 +15,8 @@ blockquote {
 	cite {
 		font-size: $font__size-xs;
 		font-style: normal;
-		@include font-family( $font__heading );
+		@include font-family( $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,8 @@ h3,
 h4,
 h5,
 h6 {
-	@include font-family( $font__heading );
+	@include font-family( $font__heading ); // For browsers without support for CSS variables.
+	font-family: var( --font-headings, $font_heading );
 }
 
 .main-navigation,
@@ -52,7 +53,8 @@ h6 {
 }
 
 .page-title {
-	@include font-family( $font__body );
+	@include font-family( $font__body ); // For browsers without support for CSS variables.
+	font-family: var( --font-base, $font_body );
 }
 
 .site-branding,

varia/sass/base/legacy/_typography.scss

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