Kirki code to add Typography to WordPress theme

customizer.php

<?php
/**
 * StrapPress Theme Customizer
 *
 * @package StrapPress
 */

/**
 * Add postMessage support for site title and description for the Theme Customizer.
 *
 * @param WP_Customize_Manager $wp_customize Theme Customizer object.
 */
function strappress_customize_register( $wp_customize ) {
	$wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
	$wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
	$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
}
add_action( 'customize_register', 'strappress_customize_register' );

/**
 * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
 */
function strappress_customize_preview_js() {
	wp_enqueue_script( 'strappress_customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '20151215', true );
}
add_action( 'customize_preview_init', 'strappress_customize_preview_js' );

if ( class_exists( 'Kirki' ) ) {
/**
 * Add the theme configuration
 */
Kirki::add_config( 'strappress_theme', array(
	'option_type' => 'theme_mod',
	'capability'  => 'edit_theme_options',
) );
/**
 * Add the typography section
 */
Kirki::add_section( 'typography', array(
	'title'      => esc_attr__( 'Typography', 'strappress' ),
	'priority'   => 2,
	'capability' => 'edit_theme_options',
) );
/**
 * Add the body-typography control
 */
Kirki::add_field( 'strappress_theme', array(
	'type'        => 'typography',
	'settings'    => 'body_typography',
	'label'       => esc_attr__( 'Body Typography', 'strappress' ),
	'description' => esc_attr__( 'Select the main typography options for your site.', 'strappress' ),
	'help'        => esc_attr__( 'The typography options you set here apply to all content on your site.', 'strappress' ),
	'section'     => 'typography',
	'priority'    => 10,
	'default'     => array(
		'font-family'    => 'Roboto',
		'variant'        => '400',
		'font-size'      => '16px',
		'line-height'    => '1.5',
		// 'letter-spacing' => '0',
		'color'          => '#333333',
	),
	'output' => array(
		array(
			'element' => 'body',
		),
	),
) );
/**
 * Add the body-typography control
 */
Kirki::add_field( 'strappress_theme', array(
	'type'        => 'typography',
	'settings'    => 'headers_typography',
	'label'       => esc_attr__( 'Headers Typography', 'strappress' ),
	'description' => esc_attr__( 'Select the typography options for your headers.', 'strappress' ),
	'help'        => esc_attr__( 'The typography options you set here will override the Body Typography options for all headers on your site (post titles, widget titles etc).', 'strappress' ),
	'section'     => 'typography',
	'priority'    => 10,
	'default'     => array(
		'font-family'    => 'Roboto',
		'variant'        => '400',
		// 'font-size'      => '16px',
		// 'line-height'    => '1.5',
		// 'letter-spacing' => '0',
		// 'color'          => '#333333',
	),
	'output' => array(
		array(
			'element' => array( 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', '.h1', '.h2', '.h3', '.h4', '.h5', '.h6' ),
		),
	),
) );
}