Are you a theme author? Checkout new Kirki Helpers for your themes, or start something new using our _s fork as a starting point!




Improve this section

The typography field allows you to add the most important typography-related controls in a single, compact view. It shows the following controls:

  • font-family
  • variant
  • subsets
  • font-size
  • line-height
  • letter-spacing
  • color
  • text-align
  • text-transform

Defining active sub-fields

You can define which of the above fields you want displayed or hidden using the default argument of the field.

Since defining a default value is mandatory for all fields, this way you can control both the default value of the field and the fields it contains in as little code as possible.

If for example you wanted to hide the line-height and letter-spacing controls, you’d delete these 2 lines from the defaults specified in the above example.

The exception to the above rule is the variant and subsets controls.

Since the typography control uses google fonts, in order to ensure that your fonts will be properly enqueued we have to add the variant & subsets controls for google fonts. So if you add font-family, all 3 controls will be automatically displayed when the selected font requires it.


The typography field requires you to use only the element argument in order to properly generate its CSS. Of course you can define multiple elements as documented in the documentation of the output argument, but you do not have to define a property since it will be automatically applies for each sub-element of the control.


The available options for variants are:

  • '100'
  • '100italic'
  • '200'
  • '200italic'
  • '300'
  • '300italic'
  • 'regular'
  • 'italic'
  • '500'
  • '500italic'
  • '600'
  • '600italic'
  • '700'
  • '700italic'
  • '800'
  • '800italic'
  • '900'
  • '900italic'

When selecting a default value for the variant, please make sure that the value is valid for the selected google font.


Improve this section
Kirki::add_field( 'my_config', array(
	'type'        => 'typography',
	'settings'    => 'my_setting',
	'label'       => esc_attr__( 'Control Label', 'kirki' ),
	'section'     => 'my_section',
	'default'     => array(
		'font-family'    => 'Roboto',
		'variant'        => 'regular',
		'font-size'      => '14px',
		'line-height'    => '1.5',
		'letter-spacing' => '0',
		'subsets'        => array( 'latin-ext' ),
		'color'          => '#333333',
		'text-transform' => 'none',
		'text-align'     => 'left'
	'priority'    => 10,
	'output'      => array(
			'element' => 'body',
) );


Improve this section
Please note: in all our examples we're assuming you're using theme_mods. If in your Project's Configuration you've chosen to use options instead of theme_mods, then please refer to the Getting Values documentation.

It is advised to use this field with the output argument to directly apply the generated CSS and automatically generate and enqueue the script necessary for Google Fonts to function.


$value = get_theme_mod( 'my_setting', array() );

if ( isset( $value['font-family'] ) ) {
	echo '<p>' . sprintf( esc_attr_e( 'Font Family: %s', 'my-textdomain' ), $value['font-family'] ) . '</p>';
if ( isset( $value['variant'] ) ) {
	echo '<p>' . sprintf( esc_attr_e( 'Variant: %s', 'my-textdomain' ), $value['variant'] ) . '</p>';
if ( isset( $value['subsets'] ) ) {
	if ( is_array( $value['subsets'] ) ) {
		echo '<p>' . sprintf( esc_attr_e( 'Subsets: %s', 'my-textdomain' ), implode( ', ', $value['subsets'] ) ) . '</p>';
	} else {
		echo '<p>' . sprintf( esc_attr_e( 'Subset: %s', 'my-textdomain' ), $value['subsets'] ) . '</p>';
if ( isset( $value['font-size'] ) ) {
	echo '<p>' . sprintf( esc_attr_e( 'Font Size: %s', 'my-textdomain' ), $value['font-size'] ) . '</p>';
if ( isset( $value['line-height'] ) ) {
	echo '<p>' . sprintf( esc_attr_e( 'Line Height: %s', 'my-textdomain' ), $value['line-height'] ) . '</p>';
if ( isset( $value['letter-spacing'] ) ) {
	echo '<p>' . sprintf( esc_attr_e( 'Letter Spacing: %s', 'my-textdomain' ), $value['letter-spacing'] ) . '</p>';
if ( isset( $value['color'] ) ) {
	echo '<p>' . sprintf( esc_attr_e( 'Color: %s', 'my-textdomain' ), $value['color'] ) . '</p>';


Argument Required Type Description
type yes string Set to typography.
default yes array See "Defining active sub-fields" section.
settings yes string The setting-name that will be used to identify this field.
section yes string Defines the section in which this field's control will be added.
label no string The title that will be displayed in the control.
description no string An optional description
priority no int You can use priority to change the order in which your controls are added inside a section. Defaults to 10.
variables no array If you're using a compiler you can use this to define the corresponding variable names. See variables documentation for more details.
tooltip no string Add a localized string to show an informative tooltip.
active_callback no string/array A callable function or method returning boolean (true/false) to define if the current field will be displayed or not. Overrides the required argument if one is defined.
sanitize_callback no string/array Not necessary since we already have a default sanitization callback in pace. If you want to override the default sanitization you can enter a callable function or method.
transport no string refresh or postMessage. defaults to refresh.
required no array Define field dependencies if you want to show or hide this field conditionally based on the values of other controls.
capability no string The capability required so that users can access this setting. This is automatically set by your configuration, and if none is defined in your config then falls-back to edit_theme_options. You can use this to override your config defaults on a per-field basis.
option_type no string theme_mod, option, user_meta. This option is set in your configuration but can be overridden on a per-field basis. See configuration documentation for more details.
option_name no string This option is set in your configuration but can be overridden on a per-field basis. See configuration documentation for more details.
output no array Define an array of elements & properties to auto-generate and apply the CSS to your frontend. See output documentation for more details.
js_vars no array Define an array of elements & properties to auto-generate and apply the necessary JS in order for postMessage to work. Requires that transport is set to postMessage.

The following docs are for Kirki 2.2.0 and above.