OD Local Fonts

OD Local Fonts Documentation

Privacy-friendly local font management for Joomla 6 and Helix Ultimate

OD Local Fonts is a privacy-friendly Joomla extension that allows you to manage and serve web fonts directly from your server. By hosting fonts locally, you eliminate external requests to services like Google Fonts, ensuring DSGVO/GDPR compliance and faster page loads.

What's Included:

  • Component: Main font management interface in Joomla backend
  • Helix Ultimate Plugin: Seamless integration with Helix Ultimate templates
  • Privacy Plugin: Blocks external font requests for DSGVO/GDPR compliance

Installation

Step 1: Download the Package
Download the latest pkg_odlocalfonts_X.X.zip from your purchase receipt or the octi Suite dashboard.

Step 2: Install via Joomla
Navigate to System → Extensions → Install in your Joomla backend and upload the package file.

Step 3: Access the Component
After successful installation, go to Components → OD Local Fonts to start managing your fonts.

Requirements

Software

Version

Notes

Joomla

6.0+

Latest stable version recommended

PHP

8.3+

As required by Joomla 6

Helix Ultimate

2.2+

Required for Helix integration features


Quick Start Guide

Step 1: Upload a Font
Use the sidebar upload interface to add your first WOFF2 font file.

Step 2: View in Dashboard
Your uploaded font will appear in the Dashboard table with details about style, weight, and file size.

Step 3: Use in Helix Ultimate
Navigate to your Helix template settings under Typography and select your local font from the "Local Fonts" dropdown.

Pro Tip: Don't have WOFF2 fonts? Convert your TTF/OTF files for free at FontSquirrel Webfont Generator or Transfonter.

The Dashboard provides a clean interface to view, search, and manage your uploaded fonts. All installed fonts are displayed in a sortable table with key information.

Features

  • Font List: View all uploaded fonts with family name, style, weight, and file size
  • Search: Quickly find fonts by name using the search bar
  • Sorting: Click column headers to sort by ID, Name, Style, Weight, or File Size
  • Bulk Actions: Select multiple fonts for deletion
  • Quick Upload: Upload sidebar always available for adding new fonts

Understanding Font Information

Column

Description

ID

Unique identifier for each font file

Name

Font family name (e.g., "Manrope")

Style

Font style: regular, italic, oblique

Weight

Font weight: 100-900 (e.g., 400 = regular, 700 = bold)

File Size

File size in KB - smaller is better for performance


Empty State

When no fonts are installed yet, the Dashboard displays a helpful empty state with:

  • Quick Start Guide with 3 simple steps
  • Link to FontSquirrel for WOFF2 conversion
  • Upload sidebar ready to receive your first font

Quick Tip: After uploading a font, you can immediately select it in the Helix Ultimate template settings under Typography. The font will appear in the "Local Fonts" section of the font dropdown.

Font Info Panel

The Font Info panel on the right side shows detailed information about selected fonts:

  • Font Preview: Visual preview of the selected font
  • Font Family: Complete family name
  • File Details: Format, weight, style, and file size
  • File Path: Storage location on the server
  • CSS Reference: Code snippet for manual implementation

How to use: Click on any font in the table to view its details in the Font Info panel. This is particularly useful when you need to reference font file paths for custom CSS implementations outside of Helix Ultimate.

OD Local Fonts supports multiple font formats for maximum compatibility. The upload interface varies between Free and Pro versions.

Free Version

  • Format: WOFF2 only (most efficient format)
  • Upload Method: Single file selection via "Choose a file" button
  • File Limit: One font at a time
  • Max Size: 2 MB per file

Pro Version

  • Formats: WOFF2, WOFF, TTF, OTF
  • Drag & Drop: Drag multiple files directly into the upload zone
  • Batch Upload: Upload multiple fonts at once
  • File Handling: Choose to rename or skip duplicate files
  • Max Size: Configurable in settings (default 5 MB)

Best Practices

1. Use WOFF2 Format
WOFF2 provides the best compression and is supported by all modern browsers (95%+ compatibility).

2. Upload Only Needed Weights
Don't upload every weight (100-900). Stick to essential weights like 400 (regular), 500 (medium), 600 (semibold), and 700 (bold).

3. Subset Your Fonts
Use FontSquirrel or Transfonter to subset fonts to latin/latin-ext characters only. This significantly reduces file sizes.

4. Check File Size
Aim for font files under 50 KB each. Well-optimized WOFF2 fonts are typically 15-30 KB.

⚠️ Important: Uploading fonts does NOT automatically apply them to your site. After uploading, you need to select them in your Helix Ultimate template settings under Typography.

Converting Fonts to WOFF2

If you have TTF or OTF fonts, you can convert them to WOFF2 using these free online tools:

Recommended Settings:

  • Format: WOFF2 only
  • Subsetting: Latin / Latin Extended
  • Optimization: Enable hinting and compression

Configure OD Local Fonts behavior, privacy protection, Helix integration, and advanced options. Access settings via the Options button in the toolbar.

Privacy & GDPR

The Privacy tab controls blocking of external font requests to ensure GDPR compliance.

Simple Settings

Setting Description
Enable Privacy Protection Master toggle - activates all privacy features
Block Google Fonts Prevents loading from googleapis.com and gstatic.com
Block Font Preloading Removes preconnect/prefetch hints to external servers
Show GDPR Warnings Displays admin notice when template uses Google Fonts

Expert Settings

  • Block Additional Providers: Adobe Fonts (use.typekit.net), Font Awesome, jsDelivr
  • Scan CSS Files: Automatically detect external font references in stylesheets
  • Log Blocked Requests: Record blocked fonts in Joomla's system log
  • Where to Block: Choose Frontend only, Backend only, or both

Note: These options filter frontend assets (CSS/JS) only. They do not modify server headers or integrate with consent tools.

Helix Ultimate Integration

Setting Description
Enable Helix Integration Required for all Helix-specific features
Hide Google Fonts from Dropdown Removes Google Fonts option group from font selection
Add Local Fonts to Dropdown Adds uploaded fonts as "Local Fonts" option group
Filter Weights by Available Files Shows only font weights you've actually uploaded
Persist Selection Server-Side Saves font selections to component parameters

Fallback Font Stack

System fonts used when no local font is assigned. Default stack:

system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif

Recompile Helix CSS

After changing Helix settings or uploading new fonts, click Recompile Helix CSS to regenerate your template's CSS files with current font settings.

Upload Settings (Pro)

Upload Options

  • Enable drag & drop: Allow drag & drop file uploads
  • Allow multiple uploads: Upload multiple files at once
  • Overwrite existing files: Replace files with same name
  • Normalize family names: Convert 'SpaceGrotesk' to 'Space Grotesk'
  • Normalize file names: Lowercase, hyphenate filenames
  • Auto-rename duplicates: Add _1, _2, etc. to duplicate filenames

Validation & Limits

  • Max file size: 0.5 MB - 10 MB per file (default: 5 MB)
  • Allowed formats: WOFF2 (required), WOFF, TTF/OTF
  • Subset wizard: Enable latin/latin-ext subsetting (Pro feature)
  • Max total size: Maximum total library size (default: 50 MB)

Comfort & Quality (Pro)

UX Features

  • Sticky Table Header: Header stays visible when scrolling
  • Quick Filter Bar: Family/Weight/Format filter chips above table
  • Show Small Previews: Display tiny font preview ("Abc") in table rows
  • Column Visibility: Show/hide ID, Style, Weight, Filesize columns
  • Table Density: Compact / Comfort / Spacious row spacing
  • Rows per Page: 5-100 fonts per page (default: 10)

Quality & Maintenance

  • Delete-guard: Show confirmation dialog before deleting fonts
  • Conflict Scanner: Detect duplicate font families and weights
  • Refresh Assets: Clear browser cache by incrementing asset version
  • Remember My Sort Order: Table sorting persists across page reloads

Advanced Settings (Pro)

CSS & Performance

Setting Description Default
Injection Mode How CSS is delivered to the site Auto (in <head>)
Font-display Strategy Browser font loading behavior swap (show fallback)
Preload Local Fonts Adds <link rel="preload"> for critical fonts OFF (use sparingly)
Custom Fonts Path Storage location (leave empty for default) /media/com_odlocalfonts/fonts

Preload Warning: Only preload 1-2 critical fonts (like body text). Preloading too many fonts can actually slow down your site by delaying other critical resources.

Import/Export & Debug

  • Download Settings (JSON): Export all component parameters as JSON file
  • Load Settings (JSON): Import parameters from JSON (requires confirmation)
  • Reset to Defaults: Reset all Advanced options (requires confirmation)
  • Debug Mode: Verbose logging for troubleshooting (Admin Only)

OD Local Fonts seamlessly integrates with Helix Ultimate templates, adding your uploaded fonts directly to the Typography settings.

How It Works

Step 1: Upload Fonts
Add fonts via OD Local Fonts Dashboard

Step 2: Access Template Settings
Go to Extensions → Templates → [Your Helix Template]

Step 3: Open Typography Tab
Click on "Typography" in the left sidebar

Step 4: Select Local Font
Choose from the "Local Fonts" section in font dropdowns

Step 5: Save & View
Save template settings and check your site

Where You Can Use Local Fonts

Local fonts appear in all Helix Ultimate typography dropdowns:

  • Body Font: Main content text
  • Menu Font: Navigation links
  • Headlines: H1, H2, H3, H4, H5, H6
  • Custom Fonts: Additional custom font slots

Font Weight Selection

When you select a local font family (e.g., "Manrope"), Helix Ultimate will show all available weights:

  • Without "Filter Weights" setting: Shows all standard weights (100-900)
  • With "Filter Weights" enabled: Shows only weights you've actually uploaded

Example: If you've uploaded Manrope-Regular (400), Manrope-Medium (500), and Manrope-Bold (700), enabling "Filter Weights" will show only these three options instead of all nine standard weights.

Scoped Font Selection

Helix Ultimate allows different fonts for different template positions. OD Local Fonts respects these selections and loads only the fonts actually used on each page.

CSS Generation

OD Local Fonts automatically generates @font-face rules and injects them into Helix Ultimate's CSS. No manual CSS editing required.

Removing Google Fonts

To fully replace Google Fonts with local fonts:

Step 1: Enable "Hide Google Fonts from Dropdown"
In OD Local Fonts Settings → Helix Ultimate tab

Step 2: Select Local Fonts
Go to your Helix template Typography settings and choose local fonts

Step 3: Enable Privacy Protection
In OD Local Fonts Settings → Privacy tab, enable "Block Google Fonts"

Step 4: Recompile CSS
Click "Recompile Helix CSS" button to regenerate template CSS

🛡️ DSGVO/GDPR Compliance Achieved! Your site now serves fonts locally without any requests to Google servers. If Privacy Protection is enabled, you'll see a warning in the admin area when Google Fonts are still enabled in template settings.

Font Upload Issues

Q: Upload fails with "File too large" error

Solution: Check your PHP settings. Increase upload_max_filesize and post_max_size in php.ini. Also check the "Max file size" setting in OD Local Fonts → Settings → Upload tab.

Q: "Invalid format" error when uploading WOFF2

Solution: Ensure your WOFF2 file is not corrupted. Try re-exporting from FontSquirrel or Transfonter. In Free version, only WOFF2 is supported.

Helix Ultimate Issues

Q: Local fonts don't appear in Helix dropdown

Solution:

  1. Verify that "Enable Helix Integration" is turned ON in Settings → Helix Ultimate tab
  2. Check that "Add Local Fonts to Dropdown" is enabled
  3. Clear Joomla cache: System → Clear Cache
  4. Reload your template settings page

Q: Font doesn't display on the website after selection

Solution:

  1. Click "Recompile Helix CSS" in OD Local Fonts Settings → Helix Ultimate tab
  2. Clear browser cache (Ctrl+Shift+R / Cmd+Shift+R)
  3. Check that you've uploaded the font weight you selected (e.g., if you select "Bold 700", make sure you uploaded a 700 weight file)
  4. Enable Debug Mode in Settings → Advanced to see detailed logs

Privacy/GDPR Issues

Q: Google Fonts still loading despite privacy protection

Solution:

  1. Ensure "Enable Privacy Protection" is ON in Settings → Privacy tab
  2. Check "Block Google Fonts" is enabled
  3. Verify "Where to Block Fonts" is set to "Frontend + Backend" or "Frontend Only"
  4. Clear Joomla cache and browser cache
  5. Check if Google Fonts are hardcoded in a third-party extension (use "Scan CSS Files" to detect)

Q: GDPR warning still appears in admin

Solution: The warning shows when your Helix template still has Google Fonts enabled in its settings. Go to Extensions → Templates → [Your Template] → Typography and change all font selections from "Google Fonts" to "Local Fonts".

Performance Issues

Q: Page load time increased after installing ODLF

Solution:

  • Check total font file sizes (Dashboard shows size per font). Aim for under 200 KB total
  • Use only WOFF2 format (smallest file size)
  • Upload only weights you actually use (e.g., 400, 600, 700 instead of 100-900)
  • Disable "Preload Local Fonts" unless absolutely necessary
  • Enable "font-display: swap" in Settings → Advanced

Q: Fonts loading slowly / FOIT (Flash of Invisible Text)

Solution: Change "Font-display Strategy" to "swap" in Settings → Advanced. This shows fallback fonts immediately while local fonts load in the background.

Q: What's the difference between Free and Pro versions?

A: The Free version supports single WOFF2 uploads with basic features. Pro adds drag & drop, multiple format support (WOFF, TTF, OTF), batch uploads, advanced settings, and quality-of-life features like sticky headers and quick filters.

Q: Do I need a Pro license for GDPR compliance?

A: No. Privacy protection and Google Fonts blocking are available in the Free version. Pro mainly adds upload convenience and advanced features.

Q: Can I use OD Local Fonts without Helix Ultimate?

A: Yes. OD Local Fonts works as a standalone font manager. However, the automatic dropdown integration only works with Helix Ultimate templates. For other templates, you can manually reference fonts via CSS using the paths shown in the Dashboard.

Q: How do I convert TTF/OTF fonts to WOFF2?

A: Use free online tools like FontSquirrel Webfont Generator or Transfonter. Both generate WOFF2 with proper subsetting for optimal file sizes. Select "WOFF2" output format and enable Latin subsetting.

Q: Will fonts still work if I uninstall OD Local Fonts?

A: No. The fonts are managed by the component. If you uninstall, the font files will be deleted and your site will fall back to system fonts or Google Fonts (if re-enabled in template settings).

Q: Can I use custom font paths?

A: Yes (Pro only). In Settings → Advanced, you can specify a custom fonts path. Leave empty to use the default /media/com_odlocalfonts/fonts location.

Q: How many fonts can I upload?

A: There's no hard limit on font count. However, the "Max total size" setting (default: 50 MB in Pro) limits your total library size to keep your site performant.

Q: Does ODLF work with Joomla 5?

A: No. OD Local Fonts is built for Joomla 6+ and requires PHP 8.1+. For Joomla 5 support, please contact support.

Q: Can I migrate fonts from another font manager?

A: Yes. Simply upload your font files via OD Local Fonts. The component will automatically detect font family, weight, and style from the font file metadata.

Q: Are variable fonts supported?

A: Not yet. Variable fonts (.woff2 with variable axes) are planned for a future update. Currently, ODLF expects static font files with specific weights (e.g., Regular 400, Bold 700).

octi Suite
Legacy
Contact Us

Email: suite@octi-design.at

Support: support@octi-design.at

Address: Sonnhalb 35, 5511 Hüttau, Salzburg, Austria

Follow Us: