SafeFonts helps you comply with GDPR by hosting fonts locally and avoiding third-party requests, with seamless Gutenberg integration and CSS variables support.
If you need to host custom fonts locally on your WordPress site for performance, privacy, or GDPR compliance, SafeFonts makes it simple with advanced security validation, automatic integration with the WordPress block editor, and CSS variables for custom CSS usage.
Compatible With
Block Editors:
- WordPress Gutenberg Block Editor
- WordPress 6.5+ Font Library
- Full Site Editing (FSE) Themes
Need Page Builder Integration?
SafeFonts Pro adds seamless support for 14 integrations: Elementor, Bricks, Beaver Builder, Divi, Oxygen, Brizy, Builderius, Astra, GeneratePress, Kadence, Blocksy, Kadence Blocks, Spectra, and GenerateBlocks with zero configuration.
Why Choose SafeFonts?
🔒 Security-First Approach
- Magic byte validation for all font files
- MIME type verification
- File hash checking
- Configurable file size limits
-
Protection against malicious uploads
⚡ Fast & Lightweight
-
Custom database storage for instant queries
- Designed to minimize impact on page load speed
- Optimized font delivery
-
Works with any theme or page builder
✅ Gutenberg Integration
-
Automatic integration with block editor typography
- WordPress 6.5+ Font Library support
- Works with all blocks that support typography
-
No configuration needed
🎨 CSS Variables Support
-
Automatic CSS variables generation for all fonts
- Use var(--safefonts-font-slug) in custom CSS
- Works with any theme or builder supporting CSS custom properties
- Dedicated CSS Reference page with comprehensive documentation
🎥 Quick Start Video
[youtube
https://youtu.be/aktC4iLSwpI]
Watch this quick tutorial to see how easy it is to upload and use custom fonts in WordPress.
🎯 Simple Upload Process
- Individual font file uploads (.woff2, .woff, .ttf, .otf)
- Specify font family, weight, and style
- Visual font previews in admin
-
Drag-and-drop ready interface
⚡ Performance Optimization
-
Font preloading support for faster page loads
- Automatic preload tag generation:
<link rel="preload" href="..." as="font">
- User-selectable fonts for preloading (Settings tab)
- Best practice: Preload 1-2 critical fonts only
- Reduces flash of invisible text (FOIT)
-
Improves Core Web Vitals scores
🌍 GDPR Compliant
-
Local font hosting
- No external font requests—fonts are served entirely from your WordPress installation
- Complete data privacy
- Suitable for GDPR-compliant sites
Perfect For
- Privacy-conscious websites requiring GDPR compliance
- Sites that need custom or premium fonts
- Agencies managing multiple client sites
- Anyone wanting better control over typography
- Performance-optimized websites
How It Works
- Upload Fonts: Go to SafeFonts menu and upload your font files
- Configure Details: Set font family name, weight (100-900), and style (normal/italic)
- Use Everywhere: Your fonts automatically appear in:
- Gutenberg block editor typography settings
- CSS variables for custom CSS (check CSS Reference page)
- WordPress 6.5+ Font Library
- That's It! Fonts are served locally with optimal performance
Getting Google Fonts
Download Google Fonts from these sources:
Once downloaded, upload the font files (.woff2, .woff, .ttf, .otf) through SafeFonts > Upload tab.
Need more features? SafeFonts Pro offers bulk ZIP imports, page builder integration, and advanced font management.
Learn more
Supported Font Formats
- WOFF2 (recommended - best compression)
- WOFF (broad browser support)
- TTF (TrueType fonts)
- OTF (OpenType fonts)
WordPress 6.5+ Font Library
If you're using WordPress 6.5 or higher, SafeFonts automatically integrates with the native Font Library in the Site Editor, giving you a unified font management experience.
Automatic Installation (Recommended)
- Go to Plugins > Add New in your WordPress admin
- Search for "SafeFonts"
- Click Install Now, then Activate
- Go to SafeFonts in the admin menu to start uploading fonts
Manual Installation
- Download the plugin zip file
- Go to Plugins > Add New > Upload Plugin
- Choose the zip file and click Install Now
- Click Activate Plugin
- Go to SafeFonts in the admin menu
First Steps After Installation
- Upload Your First Font: Go to SafeFonts > Upload tab
- Fill in Font Details: Enter font family name, select weight and style
- Upload File: Choose your font file (.woff2 recommended)
- Use in Gutenberg: Your font now appears in block typography settings
- Check CSS Reference: Visit SafeFonts > CSS Reference to see your CSS variables and implementation details