Text Style Manager

Introduction

Text Style Manager lets site builders configure typography across a Drupal site without editing theme files or writing custom CSS. Define styles for any page element using CSS selectors, or configure headings H1 through H6, all from a single administration form with a live preview.

Control font families, sizes, weights, line heights, letter spacing, text transforms and colors. Apply styles to specific themes, pages and user roles, load Google Fonts when needed, and save or transfer reusable style presets between sites.

Project Summary

Manage site-wide typography through an intuitive admin interface with CSS selector-based styles, heading customization, Google Fonts, live previews, visibility controls and reusable presets.

Features

• CSS selector-based styling: Create, edit, disable or remove sections targeting any CSS selector, such as header, .main-content or #footer .menu a.
• Comprehensive typography controls: Configure font family, font size, font weight, line height, letter spacing, text transform and text color for each section. Leave individual properties empty to retain the theme's existing styles.
• Heading customization: Configure independent styles for H1 through H6, with optional CSS selector restrictions to target headings within specific page areas.
• Flexible font selection: Choose from web-safe fonts with appropriate fallback stacks, 16 popular Google Fonts, or a custom font already loaded by your theme.
• Optimized Google Fonts loading: Load Google Fonts only when selected and enabled. The module requests each font family once and includes only the selected weights supported by that family. Configure the font-display value or disable external font loading entirely.
• Live preview: Preview typography changes as you edit the form, including Google Fonts, before saving the configuration.
• Visibility controls: Apply styles to the front-end theme, administration theme or both. Restrict styles to specific paths using wildcards, exclude selected paths, and limit visibility by user role.
• Presets and configuration portability: Start with built-in Classic, Modern and Minimal presets. Import or export settings as YAML, download configuration files, or reset settings to their defaults.
• Theme style overrides: Enable the Override theme styles option to add !important to configured declarations when necessary to override competing theme styles.
• Validation and cache integration: Validate selectors and values when saving and before rendering output. The module prevents stored settings from injecting markup and attaches appropriate cache metadata so configuration changes are reflected on matching pages, including cached pages.

Post-Installation

1. Navigate to Configuration → User interface → Text styles at /admin/config/user-interface/text-style-settings.
2. Open the Sections tab to configure the default Header, Body and Footer sections, or click Add section to create a new one. Specify a label, enter a CSS selector and configure the typography properties.
3. Open the Headings tab to configure styles for H1 through H6. Optionally, restrict heading styles to a specific area of the page.
4. Use the Fonts and output tab to configure Google Fonts loading and enable or disable theme style overrides.
5. Open the Visibility tab to select the themes, pages and user roles to which the styles should apply.
6. Review your changes in the Live preview, then click Save configuration.
7. To apply a predefined style configuration or transfer settings between sites, use the Presets tab to select a preset or import and export YAML configuration.

The module provides default Header, Body and Footer sections targeting header, #header, .main-content and footer, respectively. These sections use Arial, Georgia and Verdana as their font families. Disable or modify them if your theme already defines typography for these areas.

Additional Requirements

• Drupal 10.3 or later, including Drupal 11.
• Drupal core Block module.

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

Recommended modules/libraries

None. Text Style Manager works independently with front-end and administration themes.

Similar projects

@font-your-face focuses on integrating fonts from multiple providers and applying them to CSS selectors. Text Style Manager provides a broader typography management interface, including font sizes, weights, line heights, spacing, text transforms, colors, heading styles, visibility rules, presets and live previews.

Asset Injector allows site builders to add custom CSS directly. Text Style Manager offers a form-based alternative specifically for typography, allowing site builders to configure common text properties without manually writing CSS.

Supporting this Module

Bug reports, feature requests, patches and documentation improvements are welcome. Please use the project's issue queue on Drupal.org to report problems, suggest enhancements or contribute improvements.

Community Documentation

Documentation is available on this project page and through the module's built-in help at Help → Text Style Manager.

Troubleshooting

A style does not affect the page. Verify that the section is enabled and its CSS selector matches elements in your theme's markup. If another theme rule takes precedence, enable Override theme styles on the Fonts and output tab or use a more specific selector.

Styles are missing on certain pages. Review the settings on the Visibility tab. By default, styles apply only to the front-end theme. Theme, path and role restrictions determine where styles are applied, so ensure the current page and user satisfy all configured conditions.

A Google Font is displayed using a fallback font. Confirm that Load Google Fonts is enabled and the selected font is configured correctly. If your site uses a Content Security Policy (CSP), ensure that fonts.googleapis.com is permitted for stylesheets and fonts.gstatic.com is permitted for font resources.

A configuration import is rejected. Review the validation errors returned during import. Ensure that the imported selectors and values are valid and that all role IDs referenced in the visibility settings exist on the destination site.

Permissions

Administer text styles: Allows users to configure typography, manage presets, import and export settings, and define visibility rules. This permission is marked as restricted because the resulting CSS can affect every page matching the configured selectors and visibility conditions. Grant it only to trusted administrators.

Text Style Manager is compatible with Drupal 11 and provides a centralized way to manage typography without modifying theme files or maintaining custom CSS.