fix (blocksy): add support for CSS custom property font family (#3436)

Co-authored-by: [email protected] <>

Author: bfintal

src/global-settings.php

@@ -688,6 +688,11 @@ public function get_font_family( $font_name ) {
 				return '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
 			}
 
+			// If the font is a CSS custom property, return it directly.
+			if ( strpos( $font_name, 'var(' ) === 0 ) {
+				return $font_name;
+			}
+
 			// Google font.
 			return '"' . $font_name . '", sans-serif';
 		}

src/util/font.js

@@ -89,6 +89,11 @@ export const isGoogleFontEnqueued = ( fontName, head = document.querySelector( '
 }
 
 export const getFontFamily = fontName => {
+	// If the font is a CSS custom property, return it directly.
+	if ( fontName.match( /^\s*var\(--/ ) ) {
+		return fontName
+	}
+
 	// Google Font.
 	if ( isWebFont( fontName ) ) {
 		return `"${ fontName }", Sans-serif`