CMS Dual Font Text

CMS Dual Font Text is a purpose-built cms text component for those who want precise control over mixed typography in real content. It turns any connected field into a flexible hero headline component, combining a primary and secondary font style.

With robust cms integration, you can highlight brand names, offers, or phrases using a built-in text highlighter and animated text reveal, while preserving semantic HTML and accessibility. The result is clean, production-ready output that adapts to any layout as truly responsive text.

Whether you need dual font cms title for headlines or cms multi font text for editorial layouts, this component keeps styling predictable, fast, and on-brand.

Instructions

1. Copy and paste the component into your project file.

2. Connect your CMS text field to the “Text Content” property using the CMS connection plus icon.

3. Choose between “From End” or “Specific Words” styling methods:

   • Method 1 (From End): Set how many words from the end should use the secondary style - ideal for consistent hero headline component patterns.

   • Method 2 (Specific Words): Create a new text field in your CMS called “Secondary Font Text” and connect it to the “Target Words” property; enter single words or phrases to trigger the text highlighter.

4. Customize typography, colors, animations, and visual effects through the properties panel.

Thanks to streamlined cms integration, all adjustments reflect live content and remain compatible with responsive text behavior and animated text reveal options.

How it Works

The component features 15+ organized property controls across 6 intuitive sections:

• Content Controls (2): Text input with CMS connection and HTML element selector for semantic markup.

• Dual Font Styling (3): Method selector, word count control, and target words field for content-based highlighting, powering reliable dual font cms text.

• Typography Controls (2): Independent font settings for primary and accent text, enabling refined mixed typography.

• Color Controls (2): Separate pickers for regular and highlighted words to support the text highlighter.

• Layout & Formatting (2): Alignment, word gap and text case transformations to fit any cms multi font text setup.

• Animation System (4): Fade/Slide/Stagger reveal styles, directional controls, timing adjustments, and scroll triggers, ideal for animated text reveal.

• Visual Effects (2): Customizable drop shadows and strokes for depth and polish.

Properties Control Panel

Video Demonstration

Key Features

• Fully Responsive: Adapts perfectly to any screen size and container.

• CMS Ready: Native cms integration for seamless workflows.

• Smart Dual Typography: Mix two fonts, sizes, and weights in one block.

• Flexible Word Targeting: Choose end-word styling or dynamic per-entry word selection.

• Advanced Phrase Matching: Target multi-word phrases with precision.

• Smooth Animations: Word-by-word animated text reveal with scroll triggers.

• Semantic HTML: Use H1–H6, P, Span, or Div for SEO-friendly cms text component output.

• Visual Enhancement: Shadows, outlines, and transformations built in.

• Performance Optimized: Efficient rendering and preview detection.

• Production Ready: Accessibility features and clean semantic code.

Use Cases

• Hero Headlines: Standout headings with brand terms styled differently using dual font cms text.

• Product Titles: Highlight product names or benefits while keeping descriptions legible.

• Blog Post Headers: Emphasize categories, authors, or dates with cms multi font text.

• Marketing Copy: Enhance CTAs with contrast and animated text reveal.

• News Headlines: Style urgency indicators or attributions with the text highlighter.

• Brand Messaging: Ensure taglines and names always appear in brand fonts.

• Landing Page Headers: Drive attention through mixed typography and contrast.

• E-commerce Listings: Emphasize prices, discounts, or shipping info with styled words.

• Event Announcements: Highlight dates, locations, or event types.

• Portfolio Showcases: Differentiate project names, roles, and descriptions.

CMS Dual Font Text streamlines how teams apply mixed typography to live content. With robust cms integration, reliable responsive text rendering, and elegant animated text reveal options, it transforms any connected field into a polished hero headline component powered by dual font cms text and a seamless text highlighter system.

Made with ❤️ by Nitso

Have questions or need a custom Framer component? Reach out at creator.nitso@gmail.com