Introduction

Text Style Manager lets site builders set fonts, sizes, weights, spacing and colors for any part of a site, chosen by CSS selector, and for headings H1 to H6. Everything is configured from one admin form with a live preview, with no theme changes or custom CSS files. Styles can be limited to the front-end or admin theme, to specific pages and to specific roles, and saved as presets to reuse on other sites.

Project Summary

Configure typography for any area of the site by CSS selector, with heading styles, Google Fonts, a live preview, visibility rules and presets.

Features

• Sections that target any CSS selector, such as header, .main-content or #footer .menu a. Add, remove or disable as many as you need.
• For each section: font family, font size, font weight, line height, letter spacing, text transform and text color. Leave any property empty to keep the theme's value.
• Separate styles for headings H1 to H6, optionally limited to one area of the page, for example only headings inside .main-content.
• A font dropdown with web-safe fonts (each with a sensible fallback stack), 16 popular Google Fonts, and a custom option for fonts the theme already loads.
• Google Fonts are loaded only when used, one stylesheet per family, requesting only the weights you selected that the font actually provides. Loading can be switched off, and the font-display value is configurable.
• A live preview beside the form that updates as you type, including Google fonts, before anything is saved.
• Visibility rules: front-end theme only, admin theme only or both; only on, or on all except, a list of paths with wildcards; and only for selected roles.
• Built-in Classic, Modern and Minimal presets, YAML import and export (including a file download) for moving settings between sites, and a one-click reset to defaults.
• An "Override theme styles" option that adds !important, so the configured styles win over theme rules of equal specificity.
• Every selector and value is validated on save and again before output, so stored settings cannot inject markup into the page. Output carries the correct cache metadata, so saved changes appear immediately, including in the page cache.

Post-Installation

1. Go to Configuration → User interface → Text styles (/admin/config/user-interface/text-style-settings).
2. On the Sections tab, edit the default Header, Body and Footer sections or click Add section. Give each one a label and a CSS selector, then choose its text styles.
3. On the Headings tab, set styles for H1 to H6, and optionally limit them to an area of the page.
4. On the Fonts and output tab, choose whether to load Google Fonts and whether to override theme styles.
5. On the Visibility tab, choose the theme, pages and roles the styles apply to.
6. Check the Live preview, then click Save configuration.
7. To start from a ready-made design, or to import or export settings, use the Presets tab.

The module ships with Header, Body and Footer sections that set Arial, Georgia and Verdana on header, #header, .main-content and footer. Disable or change them if your theme already styles these areas.

Additional Requirements

• Drupal 10.3+ or 11
• The core Block module

No external libraries are needed. Google Fonts are loaded from fonts.googleapis.com only when a Google font is selected and loading is enabled.

Recommended modules/libraries

None. The module works on its own with any front-end or admin theme.

Similar projects

@font-your-face focuses on loading fonts from many providers and assigning them to selectors. Text Style Manager covers the other text properties as well (size, weight, spacing, transform and color), adds heading styles, visibility rules and presets, and shows a live preview.

Asset Injector injects any CSS you write by hand. Text Style Manager is a form-based alternative for typography, so site builders don't need to write or validate CSS themselves.

Supporting this Module

Bug reports, feature requests, patches, and documentation improvements are welcome through the Drupal.org issue queue.

Community Documentation

Documentation is available in the project repository's README and in the module's built-in help at Help → Text Style Manager.

Troubleshooting

A style doesn't change anything on the page. Check that the section is enabled and that its selector matches elements in your theme's markup. If the theme sets the same property with a more specific selector, enable Override theme styles on the Fonts and output tab, or make the section's selector more specific.

No styles appear on some pages. Check the Visibility tab. Styles apply to the front-end theme only by default, and page and role rules are combined, so a page must match all of them.

A Google font shows as a fallback font. Make sure Load Google Fonts is enabled. If your site sends a Content Security Policy, allow fonts.googleapis.com for styles and fonts.gstatic.com for fonts.

An import is rejected. The error message lists each invalid value. Role IDs in the visibility settings must exist on the importing site.

Permissions

Administer text styles: configure styles, presets, import, export and visibility rules. This permission is marked as restricted, because the configured CSS is output on every matching page.

The module is fully compatible with Drupal 11.