hallowebsite Type Variables for Kadence

DE | EN

Turns the body and H1–H6 font sizes from the Kadence Customizer into responsive CSS variables, so your own CSS always uses the theme's type scale. Includes a settings page with copy buttons and a static CSS export, so you can remove the plugin later without losing anything.

Requires WordPress
6.3
Requires PHP
7.4
Author
hallowebsite

Overview

hallowebsite Type Variables for Kadence reads the global font sizes you set in the Kadence Customizer (body text and H1–H6) and outputs them as responsive CSS custom properties. Your own CSS (cards, teasers, buttons, custom blocks) then always uses the same type scale as the theme. When you change a size in the Customizer, every place that uses the variable updates too.

Features

  • CSS variables for body and h1–h6, responsive and per device.
  • Follows Kadence's tablet/mobile breakpoints, including fluid clamp() sizes.
  • A settings page with every current value and one-click Copy CSS buttons.
  • A static CSS export, so you can remove the plugin later without losing anything.
  • No frontend JavaScript and no extra files. It adds one small inline <style> block.

Requirements

  • WordPress 6.3+, PHP 7.4+
  • Kadence theme or a Kadence child theme. Without Kadence, nothing is output and a notice appears in the backend.

Installation

  1. Upload the ZIP under Plugins → Add New → Upload Plugin and activate it.
  2. Open Settings → Kadence Type Variables. Live mode is on by default.
  3. Set your sizes as usual in Appearance → Customize → Colors & Fonts → Typography and publish.

Variables

VariableMeaning
--ktv-h1-font-sizeValue for the current viewport (responsive)
--ktv-h1-font-size-desktopFixed desktop value
--ktv-h1-font-size-tabletFixed tablet value
--ktv-h1-font-size-mobileFixed mobile value

Replace h1 with body, h2, h3, h4, h5 or h6.

Usage

.card-title  { font-size: var(--ktv-h3-font-size, 24px); }
.small-print { font-size: calc(var(--ktv-body-font-size, 17px) * .85); }
.fixed-title { font-size: var(--ktv-h1-font-size-desktop, 32px); }

The plugin only defines variables. It never restyles your headings or body text. Always add a fallback value inside var().

Settings

  • Enable live CSS variables: the values are read from the theme on every page request.
  • Variable reference: a table of all current values with Copy CSS buttons.
  • Static CSS export: ready-made CSS to paste into Additional CSS.

Notes

  • Unset tablet values inherit desktop. Unset mobile values inherit tablet.
  • Units stay exactly as saved (px, rem, em, …). They are not converted.
  • Block-level or page-builder overrides are not part of the global settings.
  • Clear your page cache after changing typography.

Removing the plugin without losing styles

  1. Copy the complete static export into Customizer → Additional CSS and publish.
  2. Disable live mode, clear caches and check all breakpoints.
  3. Deactivate and delete the plugin. Your Additional CSS stays in place.