Skip to main content

Fixing Custom Font Issues on IDX Pages in IDX Broker

Updated

Overview

Custom fonts may not load correctly on IDX pages due to cross-domain restrictions and browser security policies.

This typically happens when fonts are hosted on a different domain than your IDX pages. To resolve this, you may need to modify your wrapper, use CDN-based fonts, or embed fonts directly using Base64 encoding.

Common Solutions

Option 1: Use Base64-Encoded Fonts (Most Reliable)

Embedding fonts directly into CSS avoids cross-domain issues.

Steps:

  1. Identify the font being used
    • Inspect the working page
    • Find the font-family in DevTools
  2. Download the font file
    • Open DevTools → Network → Fonts
    • Refresh page and locate the font
    • Download the .woff file
  3. Convert font to Base64
  4. Add to Custom CSS:
@font-face {
  font-family: 'YOUR_FONT_NAME';
  src: url('data:font/woff;base64,YOUR_BASE64_CODE') format('woff');
}
  1. Add this CSS to:
    Design → Custom CSS → Global

Option 2: Allow Cross-Origin Fonts via .htaccess

If fonts are hosted on your server, update your .htaccess file:

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

This allows fonts to load across domains.

Option 3: Use CDN-Based Fonts (Recommended for Icon Fonts)

Some fonts (especially icon sets) can be loaded via CDN.

Example: Font Awesome

Add to your wrapper <head> or global subheader:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous">

Alternatively, use CSS import:

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");

📌 Note: Adding <link> in the global subheader tends to work more reliably than @import.

Option 4: Use Icon Font CDNs

You can also use services like:

These provide easy CDN access to icon fonts.

Option 5: Handle IcoMoon Fonts

IcoMoon fonts require proper encoding.

  • Ensure correct HTML entities are used
  • Example:
    • Replace hex code like E039 with: &#xe039;
  • Follow IcoMoon documentation:
    http://icomoon.io/docs.html

Option 6: Workaround for Adobe Typekit Fonts

Adobe Typekit fonts cannot be directly downloaded, but a workaround exists:

  1. Inspect page → find @font-face rules
  2. Copy full generated CSS (including Base64 fonts)
  3. Paste into wrapper CSS
  4. Apply font via:
style="font-family: your-font-name;"

Common Issues & Fixes

Fonts not loading on IDX pages

  • Caused by cross-domain restrictions
  • Use Base64 or update .htaccess

Font Awesome icons not appearing

Invalid Character Error

Example:

<!-- Invalid Character -->107

Fix:

  • Replace with proper HTML entity
  • Example:
content: '\f0d7' !important;

Icons showing as squares or missing

  • Ensure correct encoding (especially for IcoMoon)
  • Confirm font files are loading properly

Best Practices

  • Use Base64 encoding for maximum compatibility
  • Prefer CDN fonts when available
  • Avoid hosting fonts without proper CORS headers
  • Always test on IDX pages separately from main site

Additional Notes

  • Older browsers (like legacy IE) may not support custom fonts
  • Some third-party themes (e.g., Elegant Themes) may require extra configuration
  • Wrapper modifications are often necessary

Support

If issues persist, contact:
developers@idxbroker.com

🤖 Zendesk AI / Answer Bot Intents

Intent: Custom fonts not working

User might ask:

  • “Why aren’t my fonts showing on IDX pages?”

Answer:
This is usually caused by cross-domain restrictions. You can fix it by embedding fonts using Base64, enabling CORS in .htaccess, or using CDN-hosted fonts.

Intent: Font Awesome not showing

User might ask:

  • “Why are my icons missing?”

Answer:
Make sure Font Awesome is loaded via CDN in your wrapper or subheader. Also verify the icon class names are correct.

Intent: Invalid character error

User might ask:

  • “What is ‘Invalid Character 107’?”

Answer:
This happens when special characters aren’t properly encoded. Replace them with the correct HTML entity (e.g., \f0d7).

Intent: Best way to load fonts

User might ask:

  • “What’s the best way to add fonts to IDX?”

Answer:
Base64-encoded fonts are the most reliable method since they avoid cross-domain loading issues.

Related articles

Powered by Zendesk