DigiFlash provides extensive typography controls through the Site Editor, allowing you to customize fonts, sizes, weights, and styles for your entire website or individual elements.
Accessing Typography Settings
Navigate to Appearance → Editor and click the Styles icon in the top-right corner. In the Styles panel, click on Typography to access all font customization options.
Understanding Font Categories
The Typography panel organizes font settings into several categories:
Text – Controls body text and paragraph font settings
Headings – Manages fonts for H1 through H6 heading levels
Buttons – Defines typography for button elements
Links – Controls link text appearance
Each category can be customized independently, allowing complete control over your website’s typographic hierarchy.
Changing Font Families
To change a font family, click on any typography category. You’ll see a Font dropdown menu displaying the currently selected font family.
Click the Font dropdown to view all available font families. DigiFlash includes access to:
System Fonts – Native fonts installed on user devices for optimal performance
Google Fonts – Extensive library of web fonts loaded from Google’s CDN
Theme Fonts – Pre-selected font pairings optimized for DigiFlash
Scroll through the list and click on any font name to apply it. The preview updates immediately, showing how the selected font appears on your website.
Setting Font Weights
Below the font family selector, you’ll find a Font Weight option. Font weight controls the thickness or boldness of text.
Available weights depend on the selected font family. Common options include:
300 – Light
400 – Regular (Normal)
500 – Medium
600 – Semi-bold
700 – Bold
800 – Extra-bold
Not all fonts support every weight. If a weight isn’t available for your selected font, that option will be disabled in the dropdown.
Adjusting Font Styles
The Font Style option allows you to apply italic or oblique styling to text. This setting works independently of font weight, letting you combine bold and italic styles when needed.
Options include:
Normal – Standard upright text
Italic – Slanted text with distinct letterforms
Some font families may have limited style options depending on what the font designer included.
Customizing Specific Heading Levels
To apply different fonts to individual heading levels, scroll down in the Typography panel to the Blocks section. Click on Heading to expand heading-specific options.
Within the heading settings, you’ll see separate controls for each heading level (H1, H2, H3, H4, H5, H6). Click on any heading level to customize its font family, weight, size, and other properties independently.
This allows you to create sophisticated typographic hierarchies where each heading level has a distinct appearance.
Applying Fonts to Custom Elements
Beyond global typography settings, you can apply different fonts to individual blocks. When editing a page or template, select any block and open its settings panel on the right side.
Click on the Typography section within the block settings to access font controls specific to that block. Changes made at the block level override global typography settings.
Using Font Pairings
DigiFlash includes carefully curated font pairings that work well together. These pairings typically combine a distinctive heading font with a readable body font.
To apply a complete font pairing, use the Browse styles feature at the top of the Styles panel. Each style variation includes a different font combination you can preview and apply with one click.
Previewing Typography Changes
As you adjust typography settings, the Site Editor preview updates in real-time. Click through different templates and pages to see how your font choices affect various content types, including posts, archives, and custom page layouts.