Typography Field

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

php

[
    'id'      => 'body_typography',
    'type'    => 'typography',
    'title'   => __('Body Typography', 'your-textdomain'),
    'subtitle' => __('Font settings for the main body text', 'your-textdomain'),
    'default' => [
        'font-family'    => 'Inter',
        'font-weight'    => '400',
        'font-size'      => '16',
        'line-height'    => '1.6',
        'letter-spacing' => '0',
        'text-transform' => 'none',
        'font-style'     => 'normal',
        'subset'         => '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

---

Return Value

Type: array

Returns an associative array of typography values, or the default array if nothing has been saved yet.

php

$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',
//     'subset'         => '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 (numeric string, e.g. 16)
line-height	string	Line height (e.g. 1.6)
letter-spacing	string	Letter spacing in px (e.g. 0, 1)
text-transform	string	Text transform (e.g. none, uppercase, capitalize)
font-style	string	Font style (e.g. normal, italic)
subset	string	Google Fonts subset (e.g. latin, latin-ext)

---

Usage Examples

Generating CSS custom properties

php

$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

php

$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

php

[
    '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

php

[
    '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.

---

Notes

• Always check individual keys with ?? 'fallback' before using them — not all keys may be present if the user has only partially configured the field.
• Font size is returned as a numeric string without a unit — append px when using in CSS.
• Letter spacing is also returned as a numeric string — append px when using in CSS.
• The subset key is used by ThemePlus for Google Fonts enqueueing — you do not need to use it in your CSS output.