https://www.youtube.com/watch?v=PFHhMM5HtdA

Want to use your custom fonts anywhere in ClickFunnels - on buttons, navigation bars, text blocks, or any element? This tutorial shows you exactly how to change the font-family of any element using just 2 lines of JavaScript code. You'll learn how ClickFunnels stores custom fonts (the secret font-888 format) and how to apply them to navigation elements that change based on which page visitors are viewing.

If you've been frustrated trying to use your custom fonts in ClickFunnels beyond the visual editor options, you're about to discover a game-changing shortcut. Most ClickFunnels members don't realize that the platform stores custom fonts under cryptic names like font-888 that you'd never find without knowing where to look. Once you understand this simple system, you can apply any custom font to any element on your pages using just two lines of JavaScript code.

The best part? This technique isn't limited to navigation bars. It works on buttons, text blocks, images, or any other element you can select with CSS. You're about to unlock complete font customization freedom that the visual editor never advertised.

> Who This Tutorial Is For

> - ClickFunnels members frustrated by limited font options in the visual editor

> - Course creators who want branded navigation that changes based on the current page

> - Anyone who's tried using custom fonts in code and had them simply not work

> - Funnel builders who need more control over typography across their pages

Here's what happens to most people when they try to use custom fonts in ClickFunnels code. They upload a beautiful custom font family through the visual editor. They name it something memorable like "Ninja Strike" or "Brand Font Bold." Then they try to reference that name in their CSS or JavaScript, and nothing happens. The font doesn't load. The browser ignores it completely.

Why does this happen? ClickFunnels doesn't store your custom fonts under the names you gave them. Instead, the platform assigns each custom font a generic identifier like font-888, font-889, or font-890. These identifiers are buried in your site's header code where you'd never think to look. Unless you know this secret, you'll waste hours trying to reference fonts that technically don't exist under the names you're calling them.

This is exactly what Katie ran into when she asked me how to change navigation fonts based on which page someone was viewing. She wanted her homepage navigation to display one font, her about page to use another, and her blog to show a third option. Simple enough conceptually - but impossible if you don't know how ClickFunnels actually stores and references custom fonts.

Once you know the font-888 secret, changing fonts dynamically becomes remarkably simple. You need exactly two lines of JavaScript code plus a small CSS block to define your styling. That's it. No complex frameworks, no external libraries, no wrestling with ClickFunnels' visual editor limitations.

Here's what the code does: The first line grabs the current page URL from the browser's address bar using `location.href`. The second line finds any element on the page with an `href` attribute matching that URL, then adds a custom CSS class to that element. Your CSS class then defines whatever font, color, size, or styling you want applied.

This works beautifully for navigation elements because each navigation link contains an `href` attribute pointing to a different page. When someone visits your homepage, the code finds the navigation link with your homepage URL and applies your custom styling. When they click to your about page, the code finds that link instead and styles it differently.

But here's what Katie didn't even know to ask about - this same technique works on any element with a unique identifier. Buttons, text blocks, images, divs - anything you can target with a CSS selector can use this approach. You're not limited to navigation bars.

First, you need a navigation element on your page. In the video example, I built this inside a Universal Element so it carries across multiple pages in the funnel automatically. You can do the same, or you can add a standard navigation element directly to each page.

Inside your navigation element, create links for each page you want in your menu - Homepage, About, Blog, Resources, whatever your site structure requires. For each link, you'll need to grab the full URL of that page and paste it into the navigation element's link settings.

Pro tip: If you're building this across multiple standalone pages rather than a funnel, make sure you're using the complete URL for each link. The JavaScript needs to match the exact URL from the browser's address bar, so "about" won't work - you need "https://yourdomain.com/about" or whatever your actual URL structure is.

This is the step most people never figure out on their own. Open your page in the ClickFunnels editor, then go to Settings and click "Show Code." You're looking for the site header code section.

Scroll down through the header code until you find a section labeled "custom fonts." You'll see declarations that look like this - `font-888`, `font-889`, `font-890`. These are your custom fonts, listed in reverse order from how they appear in your visual editor's font picker.

Here's the tricky part: The font at the bottom of your visual editor's custom font list will be font-888. The one above it will be font-889. They're in exact opposite order. If you have six custom fonts, the last one (position six) is font-888, and the first one (position one) is font-893.

Write down which font-### number corresponds to the custom font you want to use. You'll need this for your CSS in the next step.

> 💡 PrimeMover Insight

> If you're not sure which font-### corresponds to which custom font name, just test them one at a time. Change your CSS to font-888, preview the page, see what displays. Change it to font-889, preview again. Within a minute you'll know exactly which number matches your target font. I've built pages for Russell Brunson, Eric Thayne, and Jonathan Montoya using this exact testing method.

Now you'll add the two-line JavaScript code to your page. Click on your Universal Element (or wherever your navigation lives), go to Settings, and access the code section.

You can either paste this code directly into a `<script>` tag in the HTML section, or you can add it to the page's custom code area. Here's the complete code:

let link = location.href;

document.querySelector(`a[href="${link}"]`).classList.add('new-font');

What this does line by line:

The first line creates a variable called `link` and assigns it the value of `location.href` - which is the complete URL currently showing in the browser's address bar.

The second line uses `document.querySelector` to find an anchor tag (the `a` element) that has an `href` attribute exactly matching the URL we just grabbed. Then it adds a CSS class called `new-font` to that element.

You can name the class whatever you want - I just happened to call it `new-font`. If you prefer `active-nav` or `current-page` or `highlighted-link`, that works exactly the same way. Just make sure your CSS class name matches what you put here in the JavaScript.

The final piece is defining what `new-font` actually looks like. You'll add CSS either in a `<style>` tag on the page or in the custom CSS section. Here's an example:

.new-font {

font-family: font-888, Roboto, sans-serif;

font-size: 32px;

color: orange;

text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

}

Let's break down each property:

`font-family` lists your fonts in order of preference. First it tries font-888 (your custom font). If that fails for some reason, it falls back to Roboto. If Roboto isn't available, it uses the browser's default sans-serif font. Always include backup fonts.

`font-size` controls how large the text appears. You can use pixels, ems, or any other CSS unit.

`color` sets the text color. I used orange in the example because it contrasted well with the red background, but you'll choose whatever matches your brand.

`text-shadow` adds a subtle shadow to make the text stand out more. This is optional but recommended if your text color is similar to your background.

Important note about font-family syntax: If your font name contains spaces, you need to wrap it in quotes like this - `font-family: "Font Name With Spaces", Roboto, sans-serif;`. But since font-888 is a single word with no spaces, no quotes are needed.

Mistake #1 - Using the Custom Font Name Instead of font-888

Most people try to write `font-family: "Ninja Strike", sans-serif;` because that's what they named the font in the editor. This doesn't work. ClickFunnels doesn't recognize your custom name in the code.

The Fix: Always use the font-### format you found in the header code. Reference font-888 or font-889 or whichever number corresponds to your desired font. This is the only way the browser knows which custom font to load.

Mistake #2 - Forgetting Backup Fonts

If you only specify `font-family: font-888;` and something goes wrong with that font loading, the browser has no fallback. Your text might display in Times New Roman or some other random default.

The Fix: Always include at least two backup fonts like this - `font-family: font-888, Roboto, sans-serif;`. This ensures your text looks professional even if the custom font fails to load.

Mistake #3 - URL Mismatch Between location.href and Navigation Links

The JavaScript needs an exact match between what's in the address bar and what's in your navigation element's href attribute. If your address bar shows "https://yourdomain.com/about" but your navigation link points to "https://yourdomain.com/about/" (with a trailing slash), the match fails.

The Fix: Copy the exact URL from your browser's address bar and paste it into your navigation element's link settings. Don't type it manually. This guarantees an exact match.

Mistake #4 - Applying This Only to Navigation Elements

The biggest missed opportunity is thinking this technique only works for navigation bars. It works for any element with a unique selector.

The Fix: Replace the `a[href="${link}"]` selector with whatever targets your desired element. For a button with a specific ID, use `#button-id`. For a text block with a custom class, use `.custom-class`. The two-line structure stays the same - you're just changing what element you're targeting.

Once you understand the basics, you can expand this technique in powerful ways. Instead of just changing fonts, you can alter colors, sizes, backgrounds, borders, or any other CSS property on the current page's navigation link.

You can also use this approach for elements beyond navigation. Here's the key principle: Any time you need to dynamically style an element based on the current page URL, location.href gives you the power to do it.

Want your homepage hero button to look different from your about page hero button? Same technique. Want certain text blocks to display only on specific pages? Same technique with `display: none` in your CSS for the pages where you don't want them.

The reason this works so well is that ClickFunnels processes the page on the user's browser, not on the server. That means JavaScript has full access to the current page state, and you can manipulate any element in real-time.

> ⚠️ Warning

> If you have multiple navigation elements on the same page (like a header nav and a footer nav), this code will add the `new-font` class to every matching href. If you only want to target one navigation, you'll need to modify the selector to be more specific - like `nav.header-nav a[href="${link}"]` to target only links inside a header navigation element.

After building pages for Russell Brunson's Unfair Advantage course and working with dozens of other top marketers, I've created GPT tools that write this exact code for you. Instead of manually finding font-### numbers or writing selectors, you describe what you want and the GPT generates the complete code.

The GPT also handles the tricky parts like finding the right font identifier, writing proper backup font chains, and creating selectors that won't conflict with other page elements. It's saved my clients hours of troubleshooting and testing.

You can access the complete JavaScript library plus GPT tools at https://www.TheFunnelSchool.com - these same shortcuts I use when building pages for high-level clients are available for anyone who wants to work faster and smarter.

You now know more about ClickFunnels custom font implementation than 95% of users. You understand the font-888 secret, you know how to grab the current page URL with location.href, and you've seen exactly how to apply dynamic styling to any element.

Here's your action plan:

The technique I showed you works immediately - no waiting for platform updates, no support tickets, no wrestling with visual editor limitations. You'll have complete control over fonts on any element within the next 15 minutes.

For even faster implementation plus additional JavaScript customization shortcuts, grab instant access to my complete code library at https://www.TheFunnelSchool.com

---

About Dan Havey

Dan Havey has been building in ClickFunnels since 2016 and has created course builds and sales pages for Russell Brunson (Unfair Advantage), Eric Thayne, Jonathan Montoya, Junior Anthony and dozens of other top marketers. With 10 years of experience in online course creation and affiliate marketing, Dan specializes in helping ClickFunnels members transform their ideas into profitable offers through advanced customization techniques that go beyond the visual editor.

Get instant access to JavaScript code libraries, GPT tools that write ClickFunnels code for you, and advanced customization training at https://www.TheFunnelSchool.com

---

P.S. ClickFunnels releases platform updates regularly, and custom code techniques like this give you implementation flexibility that visual editor users don't have. While others wait for new features to be built, you can customize any element right now using these JavaScript shortcuts. The font-888 secret alone has saved my clients hundreds of hours of design work - they upload their brand fonts once and apply them anywhere on any page without limitations.

---

Watch the full video: https://www.youtube.com/watch?v=PFHhMM5HtdA