Overview
The Typography field renders a full typography control panel — font family selection with a searchable Google Fonts browser (1,899 fonts), font weight, font size, line height, letter spacing, text transform, and font style. It returns an associative array of typography values. Use it for body text, headings, navigation, buttons, or any other typographic element in your theme.
Field Registration
[
'id' => 'body_typography',
'type' => 'typography',
'title' => __( 'Body Typography', 'your-textdomain' ),
'subtitle' => __( 'Font settings for the main body text', 'your-textdomain' ),
// Control toggles — only font-family and subsets are enabled by default.
// Explicitly enable each control you want to show in the UI:
'font-size' => true,
'font-weight' => true,
'font-style' => true,
'line-height' => true,
'letter-spacing' => true,
'text-transform' => true,
'subsets' => true,
'default' => [
'font-family' => 'Inter',
'font-weight' => '400',
'font-size' => '16',
'line-height' => '1.6',
'letter-spacing' => '0',
'text-transform' => 'none',
'font-style' => 'normal',
'subsets' => ['latin'],
],
]Field Options
| Option | Type | Required | Description |
|---|---|---|---|
id | string | ✅ | Unique field identifier — used as the option key |
type | string | ✅ | Must be typography |
title | string | ✅ | Label shown above the field |
subtitle | string | — | Smaller descriptive text shown below the label |
desc | string | — | Help text shown below the typography controls |
default | array | — | Default typography values — see default keys below |
required | array | — | Conditional logic rules — see Conditional Logic |
Control Toggles
By default only font-family and subsets are enabled. Every other control must be explicitly turned on:
| Toggle | Type | Default | Description |
|---|---|---|---|
font-family | bool | true | Font family selector with Google Fonts browser |
subsets | bool | true | Google Fonts subset selector |
font-size | bool | false | Font size input |
font-weight | bool | false | Font weight selector |
font-style | bool | false | Font style (normal / italic) |
line-height | bool | false | Line height input |
letter-spacing | bool | false | Letter spacing input |
text-transform | bool | false | Text transform selector |
To show only the font family picker (minimum config):
[
'id' => 'nav_font',
'type' => 'typography',
'title' => __( 'Navigation Font', 'your-textdomain' ),
]
To enable every control:
[
'id' => 'body_typography',
'type' => 'typography',
'title' => __( 'Body Typography', 'your-textdomain' ),
'font-size' => true,
'font-weight' => true,
'font-style' => true,
'line-height' => true,
'letter-spacing' => true,
'text-transform' => true,
'subsets' => true,
]Return Value
Type: array
Returns an associative array of typography values, or the default array if nothing has been saved yet.
$typography = themeplus_get_option( 'body_typography', [] );
// Returns:
// [
// 'font-family' => 'Inter',
// 'font-weight' => '400',
// 'font-size' => '16',
// 'line-height' => '1.6',
// 'letter-spacing' => '0',
// 'text-transform' => 'none',
// 'font-style' => 'normal',
// 'subsets' => ['latin'],
// ]Return Value Keys
| Key | Type | Description |
|---|---|---|
font-family | string | Font name — e.g. 'Inter', 'Roboto' |
font-weight | string | Font weight — e.g. '400', '700' |
font-size | string | Font size in px, no unit — e.g. '16' |
line-height | string | Line height — e.g. '1.6' |
letter-spacing | string | Letter spacing in px, no unit — e.g. '0', '1' |
text-transform | string | Text transform — 'none', 'uppercase', 'lowercase', 'capitalize' |
font-style | string | Font style — 'normal' or 'italic' |
subsets | array | Google Fonts subsets — e.g. ['latin'], ['latin', 'latin-ext'] |
Usage Examples
Generating CSS custom properties
$body = themeplus_get_option( 'body_typography', [] );
if ( ! empty( $body ) ) {
echo '<style>
body {
font-family: "' . esc_attr( $body['font-family'] ?? 'inherit' ) . '", sans-serif;
font-weight: ' . esc_attr( $body['font-weight'] ?? '400' ) . ';
font-size: ' . absint( $body['font-size'] ?? 16 ) . 'px;
line-height: ' . esc_attr( $body['line-height'] ?? '1.6' ) . ';
letter-spacing: ' . esc_attr( $body['letter-spacing'] ?? '0' ) . 'px;
text-transform: ' . esc_attr( $body['text-transform'] ?? 'none' ) . ';
font-style: ' . esc_attr( $body['font-style'] ?? 'normal' ) . ';
}
</style>';
}Multiple typography fields as CSS custom properties
$options = themeplus_get_option();
$body = $options['body_typography'] ?? [];
$heading = $options['heading_typography'] ?? [];
$nav = $options['nav_typography'] ?? [];
echo '<style>:root{';
if ( ! empty( $body['font-family'] ) ) {
echo '--font-body: "' . esc_attr( $body['font-family'] ) . '", sans-serif;';
echo '--font-size-base: ' . absint( $body['font-size'] ?? 16 ) . 'px;';
echo '--line-height-base: ' . esc_attr( $body['line-height'] ?? '1.6' ) . ';';
}
if ( ! empty( $heading['font-family'] ) ) {
echo '--font-heading: "' . esc_attr( $heading['font-family'] ) . '", serif;';
echo '--font-weight-heading: ' . esc_attr( $heading['font-weight'] ?? '700' ) . ';';
}
if ( ! empty( $nav['font-family'] ) ) {
echo '--font-nav: "' . esc_attr( $nav['font-family'] ) . '", sans-serif;';
}
echo '}</style>';Heading typography
[
'id' => 'heading_typography',
'type' => 'typography',
'title' => __('Heading Typography', 'your-textdomain'),
'subtitle' => __('Applied to all H1–H6 headings', 'your-textdomain'),
'default' => [
'font-family' => 'Poppins',
'font-weight' => '700',
'font-size' => '36',
'line-height' => '1.2',
'letter-spacing' => '0',
'text-transform' => 'none',
'font-style' => 'normal',
],
]With a conditional field
[
'id' => 'enable_custom_fonts',
'type' => 'toggle',
'title' => __('Enable Custom Fonts', 'your-textdomain'),
'default' => false,
],
[
'id' => 'body_typography',
'type' => 'typography',
'title' => __('Body Font', 'your-textdomain'),
'required' => ['enable_custom_fonts', '==', true],
],
[
'id' => 'heading_typography',
'type' => 'typography',
'title' => __('Heading Font', 'your-textdomain'),
'required' => ['enable_custom_fonts', '==', true],
],Google Fonts
When a Google Font is selected, ThemePlus automatically enqueues it on the frontend using the Google Fonts API. You do not need to manually enqueue the font — just use the font-family value in your CSS.
Custom fonts uploaded via the Custom Fonts module also appear in the font family selector alongside Google Fonts.