Uploaded custom fonts not appearing on live site
-
Hello,
I’m working on adding a toggle to my website to allow users to switch an article’s text from a serif font to OpenDyslexic for extra readability. However, while the OpenDyslexic font displays in the editor window, as soon as I view a post on the website (either live or in a preview window), it doesn’t display, instead falling back to the default sans-serif font. I uploaded the font via Appearance -> Fonts, and it appears in the editor’s Typography -> Font menu, so I’m not sure what I could be missing. Any help would be much appreciated!
As an aside, I’ve also noticed that while OpenDyslexic does appear as an option in the editor’s Typography menu, it doesn’t show up in my theme’s font settings under Appearance -> Customize -> Fonts. Worth noting that I don’t actually need it to be showing up there, as I don’t plan to change the global font settings on my site at this time, but it was nonetheless a strange inconsistency that seemed worth pointing out.
Here are some screenshots for reference:
Fonts menu with OpenDyslexic uploaded and marked as active:
Post editor with OpenDyslexic appearing properly:
Corresponding HTML for the checkbox:
Post display with sans-serif fallback font displayed instead of OpenDyslexic:
The blog I need help with is: (visible only to logged in users)
-
while OpenDyslexic does appear as an option in the editor’s Typography menu, it doesn’t show up in my theme’s font settings under Appearance -> Customize -> Fonts.
From reading this Support Guide, https://wordpress.com/support/custom-fonts/upload-font/ it seems like it should appear at Appearance -> Customize -> Fonts and if it isn’t that might be an indication that there is a problem in the background.
I’ve tagged your thread for Staff attention and assistance here. Thanks for your patience.
STAFF Please also note: According to that Support guide, any paid plan can upload custom fonts, including Personal. However, when on a site with a Personal plan upgrade, at Appearance>Fonts I see a banner noting this feature is only available on Business and up.
-
Hi Olivia,
Thanks for laying everything out so clearly — the screenshots and the HTML for your toggle really helped me get to the bottom of this quickly.
I actually set up a test site with the same theme you have and went through the same steps you did, so I could see the problem firsthand. Here’s what I found:
The good news is that there’s nothing wrong with your font upload — OpenDyslexic is actually working! When I applied it directly to a paragraph block through the editor’s Typography settings and viewed the post live, it showed up perfectly, even on a classic theme like Dyad 2.
The issue is specifically with the toggle approach. Basically, the Font Library only loads the font file on a page when a block on that page is actively using it. So when your JavaScript checkbox tries to switch everything to OpenDyslexic, the browser goes looking for the font and can’t find it — because no block told the page to load it. That’s why you’re getting the fallback font instead.
The good news is, there’s a pretty easy fix! There’s a free plugin called Use Any Font (https://wordpress.org/plugins/use-any-font/) that registers your uploaded font globally — meaning it loads on every page, whether or not a block is using it. That’s exactly what your toggle needs.
Here’s how to set it up:
- Head to Plugins → Add New, search for “Use Any Font”, and install/activate it
- In Settings → Use Any Font, grab a free Lite API key (there’s a button right at the top)
- Upload your OpenDyslexic font file through the plugin
- That’s it — you don’t need to assign it to anything in the plugin settings
I went through this exact process on my test site with the same kind of JS toggle you’re using, and once the plugin was active, the toggle worked perfectly. Your existing code should just start working once the font is globally available.
Oh, and regarding the Customizer → Fonts thing you mentioned — that’s actually expected! The Customizer’s font list and the Font Library (Appearance → Fonts) are two separate systems. The Customizer only shows fonts your theme has built-in, while uploaded fonts show up in the block editor’s Typography menu. Since you’re using the toggle approach anyway, this won’t affect you at all.
Hope that gets your accessibility toggle up and running! Let me know if you hit any snags along the way.
I’m sharing a screen grab of my site’s post which was published showing it as working.
-
Hello Soban, and thank you for the tips; looks like that did the trick!
There’s one other thing I’m curious about. You said:
Basically, the Font Library only loads the font file on a page when a block on that page is actively using it. So when your JavaScript checkbox tries to switch everything to OpenDyslexic, the browser goes looking for the font and can’t find it — because no block told the page to load it. That’s why you’re getting the fallback font instead.
However, on the test post I screenshotted, the OpenDyslexic font is unconditionally applied to the checkbox, so I would think it would always be loaded on the page regardless. Do styles applied directly to HTML elements not automatically apply at page load?
-
Hey @olivigarden!
Thank you for letting us know!The font will load globally once added; however, the toggle button you’re referring to would require some coding, and that’s outside our scope of support. Alternatively, you could consider some third-party plugin solutions like CoDicts CSS Switcher Add-On, Style Switcher or others.
I hope this helps!
WordPress.com Forums 