DigiFusion comes with built-in Google Fonts integration that allows you to easily customize typography across your website. The theme provides an intuitive interface for selecting and applying fonts to different elements, ensuring your site maintains a consistent and professional appearance.
Understanding DigiFusion’s Font System
DigiFusion includes a comprehensive font management system that handles Google Fonts loading, caching, and optimization automatically. The theme supports both Google Fonts CDN and local font hosting for improved performance and privacy compliance.
Key Features
The font system in DigiFusion offers several advanced features:
Automatic Font Loading: The theme automatically detects which fonts are being used and loads only the necessary font files, reducing page load times.
Weight and Style Management: DigiFusion intelligently loads only the font weights and styles you actually use on your site.
Local Font Hosting: For GDPR compliance and improved performance, the theme can host Google Fonts locally on your server.
Typography Controls: Access comprehensive typography settings through the WordPress Customizer for fine-tuned control over your site’s appearance.
Accessing Font Settings
Navigate to the WordPress Customizer to access DigiFusion’s typography options:
Go to Appearance > Customize from your WordPress dashboard.
Look for the Typography section in the Customizer sidebar.
Here you’ll find separate controls for different elements such as headings, body text, navigation, and other specific components.
Each typography control includes options for font family, font weight, font size, line height, and letter spacing.
Selecting Google Fonts
DigiFusion provides access to the complete Google Fonts library through an easy-to-use interface:
Click on any font family dropdown in the Typography section.
Browse through the available Google Fonts or use the search function to find specific typefaces.
Preview how fonts will look on your site in real-time as you make selections.
The theme automatically handles font loading and optimization when you save your changes.
Configuring Font Weights and Styles
When you select a Google Font, DigiFusion automatically determines which font weights and styles to load based on your theme’s design:
The theme analyzes your content and design elements to identify required font weights.
Only necessary variants (regular, bold, italic, etc.) are loaded to maintain optimal performance.
Performance Optimization
DigiFusion includes several performance optimization features for Google Fonts:
Font Display Optimization
The theme uses font-display: swap by default, which ensures text remains visible during font load times and prevents invisible text periods.
Preconnect and Preload
DigiFusion automatically adds resource hints to improve font loading performance:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>Local Font Hosting
For enhanced performance and privacy compliance, you can enable local font hosting:
Enable local font hosting in the Customizer under Typography > Font Loading.
The theme will automatically download and serve Google Fonts from your server.
Custom Font Implementation
If you need to add custom fonts beyond Google Fonts, DigiFusion provides several methods:
Using CSS Custom Properties
Add custom font definitions to your child theme’s style.css:
@import url('https://fonts.googleapis.com/css2?family=YourCustomFont:wght@300;400;700&display=swap');
:root {
--custom-font: 'YourCustomFont', sans-serif;
}
.custom-element {
font-family: var(--custom-font);
}
Enqueuing Custom Fonts
Add custom fonts through your child theme’s functions.php:
function child_theme_custom_fonts() {
wp_enqueue_style(
'custom-fonts',
'https://fonts.googleapis.com/css2?family=YourFont:wght@400;700&display=swap',
array(),
'1.0.0'
);
}
add_action('wp_enqueue_scripts', 'child_theme_custom_fonts');Typography Best Practices
When working with fonts in DigiFusion, follow these best practices for optimal results:
Font Pairing
Limit yourself to 2-3 font families maximum to maintain visual coherence.
Pair fonts with contrasting characteristics (serif with sans-serif, or different weights).
Ensure sufficient contrast between font combinations for readability.
Performance Considerations
Use web-safe fallback fonts in your font stacks.
Limit the number of font weights and styles to reduce load times.
Consider using system fonts for body text and Google Fonts for headings only.
Accessibility Guidelines
Maintain minimum font sizes of 16px for body text to ensure readability.
Ensure adequate color contrast ratios between text and background colors.
Test your font choices across different devices and screen sizes.
Troubleshooting Font Issues
If you encounter problems with fonts not loading or displaying correctly:
Clear Caching
Clear any caching plugins, CDN cache, and browser cache to ensure font changes are visible.
Check Font Availability
Verify that your selected Google Fonts are still available and haven’t been deprecated.
Validate CSS
Ensure there are no CSS syntax errors that might prevent fonts from loading properly.
Network Connectivity
Check that your site can successfully connect to Google Fonts servers if using CDN loading.