Body Typography

Configure the typography settings for body text throughout your BuddyX Pro website. These settings control the primary reading experience for your visitors.

Body typography configuration in the WordPress Customizer

Accessing Typography Settings

1. Go to Appearance > Customize
2. Navigate to Typography > Body Typography

Body Font Settings

The Body typography control (typography_option) is a single picker with nine inputs. There is no separate “font source” switch and no per-breakpoint size fields - the family dropdown already groups every available font, and the size field takes one value. (Global size scaling across headings and body lives in the Font Preset section’s Base font size and Heading scale ratio sliders, not here - see Typography Presets.)

Font Family

Choose the body font from a single grouped dropdown. There is no Google-vs-system toggle; every source appears in the same list:

Group	Where it comes from
Theme fonts	Fonts registered in the theme’s theme.json (self-hosted, including the system-ui baseline)
Google Fonts	The bundled Google Fonts catalog
Custom Fonts	Fonts you uploaded via Appearance > Fonts (WordPress Font Library) - shown only when present

The dropdown has a searchable Default (theme) entry at the top; leaving it selected uses the theme baseline. Default: Default (theme).

Font Weight

Setting	Options	Default
Weight	300, 400, 500, 600, 700	400 (Regular)

The control exposes the weights 300-700. The weights that actually render also depend on the chosen font - a font that ships only 400/700 will approximate the others.

Font Style

Setting	Options	Default
Style	Normal, Italic	Normal

Font Size

Setting	Description	Default
Size	Body font size in px (range 8-200)	16px

Size is a single pixel value. BuddyX Pro does not expose separate mobile/tablet body-size fields; use Additional CSS with a media query if you need a different size on small screens.

Line Height

Setting	Description	Default
Line height	Space between lines (range 0.8-3, step 0.05)	1.6

Recommendations:

• Body text: 1.5 - 1.8
• Dense content: 1.4 - 1.5
• Spacious layout: 1.8 - 2.0

Letter Spacing

Setting	Description	Default
Letter	Space between characters, in em (range -0.1 to 0.5)	0

Usage:

• Normal text: 0 to 0.02em
• Uppercase text: 0.05em+ improves readability
• Negative values: tighten text for headings

Additional Text Options

The body control also exposes three styling options beyond family, weight, style, size, line height, and letter spacing:

Setting	Options	Default
Transform	none, uppercase, lowercase, capitalize	none
Align	Inherit, left, center, right, justify	left
Decoration	none, underline, line-through, overline	none

The chosen body font family is also published as the global --global-font-family CSS variable, so plugins and custom CSS can inherit the same base font.

Menu Typography

BuddyX Pro styles your navigation separately from body and heading text, with dedicated controls for top-level menu items and their dropdown sub-menus.

1. Go to Appearance > Customize
2. Click on Typography
3. Select Menu Typography

Menu Settings

Controls the typography of top-level navigation links (the main menu and the mobile menu toggle).

Option	Description	Default
Font Family	Google Font or system font	Theme baseline
Font Weight	Thickness of menu text	500 (Medium)
Font Size	Size of menu links	16px
Line Height	Space between lines	1.6
Letter Spacing	Space between characters	0.02em
Text Transform	Case style (none, uppercase, lowercase, capitalize)	none
Text Decoration	Additional styling (none, underline)	none

Sub Menu Settings

Controls the typography of dropdown sub-menu links that appear under a parent menu item.

Option	Description	Default
Font Family	Google Font or system font	Theme baseline
Font Weight	Thickness of sub-menu text	500 (Medium)
Font Size	Size of sub-menu links	16px
Line Height	Space between lines	1.6
Letter Spacing	Space between characters	0.02em
Text Transform	Case style	none
Text Align	Horizontal alignment (left, center, right)	left
Text Decoration	Additional styling (none, underline)	none

Tip: Keep the menu and sub-menu font family the same for a cohesive navigation, and reserve weight or letter-spacing changes to distinguish the two levels. Menu link colors are set separately under Skin settings - see Color Scheme Settings.

Text Colors

Body Text Color

Setting	Description	Default
Text Color	Primary body text color	#333333
Link Color	Hyperlink text color	Primary Color
Link Hover	Link hover state	Primary Hover

See Color Scheme Settings for complete color configuration.

Font Loading Optimization

BuddyX Pro optimizes Google Fonts loading for performance:

Preconnect

Automatically adds DNS preconnect for faster font loading:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Font Display

Option	Behavior
Swap	Show fallback font, swap when loaded (default)
Block	Hide text until font loads
Fallback	Brief block, then fallback if slow
Optional	Use if cached, otherwise fallback

Recommendation: Use swap for best user experience and Core Web Vitals.

Subsetting

BuddyX Pro requests only necessary character subsets:

• Latin (default)
• Latin Extended (European languages)
• Cyrillic (Russian, etc.)
• Greek
• Vietnamese

System Font Stack

When using system fonts, BuddyX Pro uses this optimized stack:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

Benefits:

• Zero external requests
• Fastest possible loading
• Native look and feel per OS
• Excellent readability

Configuration Examples

Example 1: Modern Blog

Font Family: Inter
Font Size: 17px
Font Weight: 400
Line Height: 1.75
Letter Spacing: 0

Example 2: Corporate Site

Font Family: Source Sans Pro
Font Size: 16px
Font Weight: 400
Line Height: 1.6
Letter Spacing: 0.2px

Example 3: Community Platform

Font Family: Nunito
Font Size: 15px
Font Weight: 400
Line Height: 1.7
Letter Spacing: 0

Accessibility Considerations

Minimum Font Size

• Body text: Minimum 16px recommended
• Never below 14px for readability
• Consider users with visual impairments

Contrast Ratio

Ensure text meets WCAG 2.1 requirements:

• Normal text: 4.5:1 minimum contrast
• Large text (18px+): 3:1 minimum contrast

Line Length

Optimal reading experience:

• 45-75 characters per line
• Controlled by container width, not font settings

Troubleshooting

Font Not Loading

Problem: Selected Google Font doesn’t appear.

Solutions:

1. Check internet connectivity
2. Verify font name is spelled correctly
3. Clear browser cache
4. Check for ad blockers blocking Google Fonts
5. Try a different font to test

Font Appears Different Than Preview

Problem: Font looks different on live site.

Solutions:

1. Different operating systems render fonts differently
2. Check font weight is available for chosen font
3. Verify font-smoothing CSS isn’t conflicting
4. Some fonts have limited weight options

Performance Impact

Problem: Fonts slowing down page load.

Solutions:

1. Limit to 2-3 font families maximum
2. Use font-display: swap
3. Consider system fonts for body text
4. Preload critical fonts
5. Use variable fonts when available

Font Not Matching Design

Problem: Font looks too light or heavy.

Solutions:

1. Adjust font weight setting
2. Some fonts have different weight distributions
3. Check if font supports the weight you need
4. Consider a different font with better weight options

Related Documentation

• Heading Typography - H1-H6 font settings
• Google Fonts Integration - Font loading details
• Color Scheme Settings - Text colors

---

Got a question? We’re a friendly team - happy to help.

• Visit our Documentation Portal
• Email us at support@wbcomdesigns.com