OD Local Fonts

• Font List: Displays all uploaded fonts and their metadata
• Search: Filter fonts by family name
• Sorting: Sort entries by ID, family, style, weight, or file size
• Bulk Actions: Remove multiple fonts at once
• Quick Upload: Upload new fonts directly from the dashboard

When no fonts are available, the Dashboard displays a guided empty state with upload instructions, helpful resources, and direct access to the upload interface.

Quick Tip: After uploading a font, it becomes available immediately in supported integrations such as Helix Ultimate, Helix 3, and SP Page Builder.

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 upload workflows depending on the installed edition.

Basic users can upload fonts directly through the Dashboard, while Professional users gain access to additional upload settings, advanced file handling, and extended format support.

The Basic edition allows uploading fonts directly from the Dashboard.

• Supported Format: WOFF2
• Upload Method: Single file upload
• Immediate availability after upload
• No additional configuration required

WOFF2 is recommended for optimal performance, browser compatibility, and reduced file size.

The Professional edition unlocks advanced upload capabilities and additional font formats.

• Supported Formats: WOFF2, WOFF, TTF, OTF, Variable Fonts
• Multiple file uploads Drag & Drop support
• Duplicate file handling
• Advanced upload settings
• Configurable upload limits

1. Use WOFF2 Format
WOFF2 provides excellent compression and is supported by all modern browsers.

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). Note: Variable fonts are a single file covering all weights — upload just the one file instead of multiple fixed-weight files.

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, select them either in your Helix Ultimate template settings under Typography, or in Settings → Helix 3 tab if you're using a Helix 3 template.

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

• FontSquirrel Webfont Generator: Comprehensive tool with subsetting options
• Transfonter: Modern converter with WOFF2 support and CSS generation

Recommended Settings:

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

The Privacy tab provides tools to reduce external font requests and improve GDPR/DSGVO compliance.

Simple Settings

• Enable Privacy Protection: Master switch for all privacy-related features.
• Block Google Fonts: Blocks requests to Google Fonts services, including googleapis.com and gstatic.com.
• Block Font Preloading: Removes external preconnect, preload, and prefetch hints where supported.
• Show GDPR Warnings: Displays administrator notifications when external font providers are detected.

Expert Settings

• Block Additional Providers: Blocks requests to additional providers such as Adobe Fonts (use.typekit.net), Font Awesome, and jsDelivr.
• Scan CSS Files: Scans stylesheets for external font references.
• Log Blocked Requests: Records blocked font requests for troubleshooting and auditing purposes.

Note: These options focus on frontend asset filtering (CSS/JS) and external font requests. They do not modify server configurations, HTTP headers, or consent management solutions.

The Helix Ultimate integration makes uploaded local fonts available directly within Helix Ultimate typography settings and helps replace external font providers with locally hosted alternatives.

• Enable Helix Integration: Enables all Helix Ultimate integration features.
• Hide Google Fonts from Dropdown: Removes Google Fonts entries from the Helix Ultimate font selection list.
• Add Local Fonts to Dropdown: Adds uploaded local fonts to the Helix Ultimate font selection list.
• Filter Weights by Available Files: Displays only font weights that are available in the uploaded font files.
• Persist Selection Server-Side: Stores selected local fonts in the component configuration for improved consistency.

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 typography settings or uploading new fonts, use the Recompile Helix CSS function to regenerate Helix Ultimate CSS files and apply the latest font configuration.

The Helix 3 integration allows uploaded local fonts to be assigned directly to common template areas such as Navigation, Body, and Headings.

Settings:

• Enable Helix 3 Integration: Enables the Helix 3 font assignment tab and runtime integration.
• Detected Templates: Displays all active Helix 3 template styles detected by OD Local Fonts.
• Font Slots: Assign local fonts independently to Navigation, Body, and Heading areas.
• Font Weight: Select the preferred font weight for each configured slot.

How It Works
OD Local Fonts applies assigned fonts automatically at runtime. Changes take effect immediately without requiring template recompilation.

Slot Behavior

• Empty slot: no CSS injected - Helix 3 retains full control of that element
• Body slot: uses the body selector, which naturally cascades to all elements unless overridden by a more specific slot
• Nav slot: targets .sp-megamenu-parent
• H1–H6 slots: target the respective heading selectors

Note:
Helix 3 must be installed and at least one active Helix 3 template style must exist for this tab to appear.

The SP Page Builder integration makes uploaded local fonts available within supported SP Page Builder typography controls.

Settings:

• Enable SP Page Builder: Enables font registration within the SP Page Builder font library.
• Auto-Sync on Save: Automatically synchronizes uploaded fonts when OD Local Fonts settings are saved.
• Sync Now: Immediately updates the SP Page Builder font library with all available local fonts.

Note:
SP Page Builder must be installed for this tab to appear. The System - ODLF SP Page Builder plugin must be enabled to activate the integration.

The Professional edition provides advanced upload handling, validation controls, and library management options.

Upload Options

• Enable Drag & Drop: Allows files to be uploaded using drag and drop.
• Allow Multiple Uploads: Upload multiple font files in a single operation.
• Overwrite Existing Files: Replaces existing files with the same filename.
• Normalize Family Names: Converts font family names into a consistent format.
• Normalize File Names: Creates standardized filenames using lowercase characters and hyphens.
• Auto-Rename Duplicates: Automatically appends numeric suffixes to duplicate filenames.

Validation & Limits

• Max File Size: Defines the maximum allowed size per uploaded file (default: 5 MB).
• Allowed Formats: Defines which font formats can be uploaded.
• Subset Wizard: Enables font subsetting options for supported formats.
• Max Total Size: Defines the maximum storage size available for the local font library.

The Professional edition includes additional usability and maintenance features designed to simplify font management and improve the overall administration experience.

UX Features

• Sticky Table Header: Keeps table headers visible while scrolling.
• Quick Filter Bar: Provides fast filtering by family, weight, and format.
• Show Small Previews: Displays compact font previews directly in table rows.
• Column Visibility: Allows individual table columns to be shown or hidden.
• Table Density: Adjusts row spacing for compact, comfortable, or spacious layouts.
• Rows per Page: Defines how many fonts are displayed per page.

Quality & Maintenance

• Delete Guard: Displays a confirmation dialog before removing fonts.
• Conflict Scanner: Detects duplicate font families and weight combinations.
• Refresh Assets: Refreshes generated assets and updates browser cache references.
• Remember My Sort Order: Preserves table sorting preferences across page reloads.

Advanced settings provide additional control over font delivery, CSS generation, and frontend performance optimization.

CSS & Performance

• Injection Mode: Defines how generated font CSS is delivered to the website.
• Font-display Strategy: Controls how fonts are loaded and displayed while the font files are being downloaded.
• Preload Local Fonts: Allows critical fonts to be preloaded for improved rendering performance.
• Custom Fonts Path: Defines a custom storage location for uploaded fonts. Leave empty to use the default path.

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, and debugging tools help manage configuration settings and assist with troubleshooting.

• Download Settings (JSON): Exports all component settings to a JSON file.
• Load Settings (JSON): Imports component settings from a previously exported JSON file.
• Reset to Defaults: Restores all advanced settings to their default values.
• Debug Mode: Enables additional diagnostic logging for troubleshooting purposes (Administrator access only).

Notes:
Importing settings may overwrite existing configuration values. Always review imported settings before applying them in production environments.

• Step 1: Upload Fonts Upload one or more fonts through the OD Local Fonts Dashboard or Upload (Pro)
• Step 2: Enable Helix 3 Feature Go to Settings → Features tab and enable "Helix 3 Integration"
• Step 3: Assign Fonts Select a font and weight for each available slot.
• Step 4: Save & View Save the configuration. Font assignments are applied automatically on the frontend. No template recompilation is required.

• Body: Applies the selected font to the main body selector and inherited elements.
• Navigation: Applies the selected font to the template navigation area.
• H1–H6: Allows individual font assignments for heading elements.

• Leave a slot empty to keep the original Helix 3 typography settings.
• Fonts that cannot be found in the local font library are skipped automatically.
• Missing font assignments are recorded in the system log when logging is enabled.

• Step 1: Upload Fonts Upload fonts through the OD Local Fonts Dashboard or Upload (Pro)
• Step 2: Access Template Settings Open your Helix Ultimate template settings.
• Step 3: Open Typography Tab Navigate to the Typography section.
• Step 4: Select Local Font Choose a font from the "Local Fonts" group.
• Step 5: Save & View Save template settings and check your site

Local fonts appear in all Helix Ultimate typography dropdowns:

• Body Font: Main content text
• Menu Font: Navigation links
• Headlines: H1-H6 elements
• Custom Fonts Slots: Additional typography assignments

When a local font family is selected, Helix Ultimate can display available font weights based on the uploaded font files.

• Without "Filter Weights by Available Files": Standard Helix Ultimate weights remain available.
• With "Filter Weights by Available Files" enabled: Only uploaded font weights are displayed.

Scoped Font Selection

Helix Ultimate allows different fonts to be assigned to different template areas. OD Local Fonts respects these assignments and loads the required fonts automatically.

To replace Google Fonts with locally hosted 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

After these steps, Helix Ultimate will use locally hosted fonts instead of Google Fonts.

• Step 1: Enable the Plugin
  Enable the System - ODLF SP Page Builder plugin under Extensions → Plugins.
• Step 2: Synchronize Fonts
  Uploaded fonts are automatically registered in the SP Page Builder font library. If required, use the Sync Now function to perform a manual synchronization.
• Step 3: Use Fonts in SP Page Builder
  Open any SP Page Builder element that supports typography settings and select a font from the Local Fonts group.

• After uploading new fonts
• After removing fonts from the library
• If fonts do not appear in SP Page Builder after enabling the integration

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

Yes, since v1.3.0 OD Local Fonts automatically detects supported variable font axes and makes them available where supported.