ARTICLE AD BOX
I’m trying to change fonts in MasterStudy LMS Front-end Course Builder (/user-account/edit-course/), but nothing works.
The main website fonts are overridden successfully via child theme, however Front-end Course Builder still uses default fonts like Eudoxus Sans and Amiko.
It looks like Course Builder UI is built with Chakra UI, and fonts are coming from its internal theme configuration.
Problem
Custom fonts load correctly in child theme
custom-styles.css is loaded on Course Builder page
CSS !important rules do NOT override fonts
JS attempts to override Chakra variables also do NOT work
Browser DevTools show fonts like:
EudoxusSans
Amiko
My custom fonts are never applied to UI elements
What I have already tried
1️⃣ Loading fonts via @font-face (works globally)
@font-face { font-family: 'ArchyEDT-Bold'; src: url('/wp-content/themes/masterstudy-child/fonts/ArchyEDT-Bold.woff2') format('woff2'); font-display: swap; }Fonts work on normal pages, but not in Course Builder.
2️⃣ Enqueue custom styles for Course Builder
Added this filter in functions.php:
function my_course_builder_additional_styles( $styles ) { if ( ! is_array( $styles ) ) { $styles = []; } $styles[] = get_stylesheet_directory_uri() . '/custom-styles.css'; return $styles; } add_filter( 'ms_lms_course_builder_additional_styles', 'my_course_builder_additional_styles' );✔ custom-styles.css is loaded on /edit-course/ page ❌ Fonts still do not change
3.CSS override for Course Builder root #masterstudy-course-builder, #masterstudy-course-builder * { font-family: 'ArchyEDT-Bold', sans-serif !important; } #masterstudy-course-builder h1, #masterstudy-course-builder h2, #masterstudy-course-builder h3, #masterstudy-course-builder h4, #masterstudy-course-builder h5, #masterstudy-course-builder h6 { font-family: 'BPGBannerExtraSquareCaps', sans-serif !important; }❌ No effect 4. Chakra UI variable override (JS)
document.documentElement.style.setProperty( '--chakra-fonts-body', "'ArchyEDT-Bold', sans-serif" );❌ Still ignored
Observations: !important does not override fonts Fonts appear to be hardcoded in Chakra UI theme
Possibly: ChakraProvider theme is initialized internally Fonts are set in JS config Or UI is rendered in isolated root / shadow / iframe
Questions: Is there an official way to override fonts in MasterStudy Course Builder? Can Chakra UI theme fonts be overridden via PHP or JS hooks? Is there any undocumented ms_lms_course_builder_* filter for typography? Is CSS override fundamentally the wrong approach here?
Environment: WordPress MasterStudy LMS Child theme Fonts located at:
/wp-content/themes/masterstudy-child/fonts/At this point it seems Course Builder fonts are locked by Chakra UI internal theme configuration, and neither CSS nor JS overrides affect it.
Any insight from MasterStudy / Chakra UI experts would be greatly appreciated.
