In Webflow, how can I select and change letters or groups of text to use alternative styles within my purchased font family?
TL;DR
- Upload all font styles to Project Settings and apply the font to text elements in the Designer.
- Create and apply custom classes to modify typography for specific text segments using desired styles.
- Highlight text within blocks and use classes to apply alternative font styles consistently.
Selecting and changing letters or groups of text to use alternative styles within a purchased font family in Webflow requires understanding of how to apply custom fonts and modify classes.
1. Upload and Set Up Your Font
- Go to Project Settings and select the Fonts tab.
- Click on Upload Font and add the font files you’ve purchased.
- Ensure you upload each style of the font family (e.g., Regular, Bold, Italic).
2. Apply the Font to Text Elements
- Return to the Designer and select the text element where you want to apply the font.
- In the Typography section of the Style Panel, choose your uploaded font family from the Font menu.
3. Create and Use Custom Classes
- Select the specific text you want to modify within a text block.
- Create a new class by clicking the blue plus sign in the Selector field.
- Name your class, then modify its typography to use the desired font style from your purchased font family.
4. Apply Inline Formatting for Specific Text Segments
- Highlight the specific letters or words within the text block.
- Open the Typography panel and apply any additional styles like Font Weight or Font Style.
- Use the classes you've created earlier to consistently apply these alternative styles.
Summary
To use alternative styles for text in Webflow with your purchased font family, upload all necessary font files in Project Settings, apply the desired font to text elements, and use custom classes for specific text segments. Highlight and modify specific parts within the text block to ensure they align with different styles from your font family.
