Blank Canvas Blocks: Add support for Google fonts

blank-canvas-blocks/assets/ponyfill.css

@@ -265,6 +265,7 @@ h1, h2, h3, h4, h5, h6 {
 
 h1, h2, h3, h4, h5, h6 {
 	clear: both;
+	font-family: var(--wp--custom--fonts--primary);
 }
 
 /**

blank-canvas-blocks/experimental-theme.json

@@ -80,6 +80,10 @@
 				]
 			},
 			"custom": {
+				"fonts": {
+					"primary": "'Playfair Display', Georgia, Times, serif",
+					"secondary": "'Fira Sans', Helvetica, Arial, sans-serif"
+				},
 				"color": {
 					"primary": "var(--wp--preset--color--black)",
 					"secondary": "var(--wp--preset--color--blue)",

blank-canvas-blocks/functions.php

@@ -19,7 +19,8 @@ if ( ! function_exists( 'blank_canvas_blocks_support' ) ) :
 		add_theme_support( 'editor-styles' );
 
 		// Enqueue editor styles.
-		add_editor_style( array( 
+		add_editor_style( array(
+			blank_canvas_blocks_fonts_url(),
 			'/assets/ponyfill.css'
 		) );
 
@@ -28,10 +29,62 @@ if ( ! function_exists( 'blank_canvas_blocks_support' ) ) :
 endif;
 
 /**
- * 
+ *
  * Enqueue scripts and styles.
  */
 function blank_canvas_blocks_scripts() {
+	// Enqueue Google fonts
+	wp_enqueue_style( 'blank-canvas-blocks-fonts', blank_canvas_blocks_fonts_url(), array(), null );
+
 	wp_enqueue_style( 'blank_canvas_blocks-ponyfill', get_template_directory_uri() . '/assets/ponyfill.css', array(), wp_get_theme()->get( 'Version' )  );
 }
 add_action( 'wp_enqueue_scripts', 'blank_canvas_blocks_scripts', 11 );
+
+/**
+ * Add Google webfonts, if necessary
+ *
+ * - See: http://themeshaper.com/2014/08/13/how-to-add-google-fonts-to-wordpress-themes/
+ */
+function blank_canvas_blocks_fonts_url() {
+	$fonts_url = '';
+
+	/* Translators: If there are characters in your language that are not
+	* supported by Fira Sans, translate this to 'off'. Do not translate
+	* into your own language.
+	*/
+	$fira_sans = esc_html_x( 'on', 'Fira Sans: on or off', 'blank-canvas-blocks' );
+
+	/* Translators: If there are characters in your language that are not
+	* supported by Playfair Display, translate this to 'off'. Do not translate
+	* into your own language.
+	*/
+	$playfair_display = esc_html_x( 'on', 'Playfair Display: on or off', 'blank-canvas-blocks' );
+
+	if ( 'off' !== $fira_sans || 'off' !== $playfair_display ) {
+		$font_families = array();
+
+		if ( 'off' !== $fira_sans ) {
+			$font_families[] = 'Fira Sans:ital,wght@0,400;0,500;1,400';
+		}
+
+		if ( 'off' !== $playfair_display ) {
+			$font_families[] = 'Playfair Display:ital,wght@0,400;0,700;1,400';
+		}
+
+		/**
+		 * A filter to enable child themes to add/change/omit font families.
+		 *
+		 * @param array $font_families An array of font families to be imploded for the Google Font API
+		 */
+		$font_families = apply_filters( 'included_google_font_families', $font_families );
+
+		$query_args = array(
+			'family' => urlencode( implode( '|', $font_families ) ),
+			'subset' => urlencode( 'latin,latin-ext' ),
+		);
+
+		$fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
+	}
+
+	return esc_url_raw( $fonts_url );
+}

blank-canvas-blocks/sass/blocks/_heading.scss

@@ -1,3 +1,5 @@
 h1, h2, h3, h4, h5, h6 {
 	clear: both;
+	font-family: var(--wp--custom--fonts--primary);
+
 }