Hi there, I’ve added a subscription widget to my website on Kajabi. I have a custome font for the H1-H6 headers and pararagh headers for all of my Kajabie sites via Kajabi Settings>Site Settings>Page Scripts with the below code I put in place for testing:
@font-face {
font-family: 'Moriche';
src: url('https://soundhaus.mykajabi.com/resource_redirect/downloads/file-uploads/sites/2148357424/themes/2160391201/downloads/1d7f0a8-dd7-4fbb-4704-7128dd37122_Moriche.woff') format('woff');
}
@font-face {
font-family: 'Mosvita-Black';
src: url('https://soundhaus.mykajabi.com/resource_redirect/downloads/file-uploads/sites/2148357424/themes/2160391201/downloads/c2f48-c216-f8d-0cae-e5d1d4e035a3_Mosvita-Black.woff') format('woff');
}
@font-face {
font-family: 'Mosvita-Bold';
src: url('https://soundhaus.mykajabi.com/resource_redirect/downloads/file-uploads/sites/2148357424/themes/2160391201/downloads/53c05-c52-32d1-a2d6-1ba5ee46586_Mosvita-Bold.woff') format('woff');
}
@font-face {
font-family: 'Mosvita-BoldExpanded';
src: url('https://soundhaus.mykajabi.com/resource_redirect/downloads/file-uploads/sites/2148357424/themes/2160391201/downloads/42d4588-080-06f7-4080-8fa3f2b27fe_Mosvita-BoldExpanded.woff') format('woff');
}
@font-face {
font-family: 'Mosvita-Regular';
src: url('https://soundhaus.mykajabi.com/resource_redirect/downloads/file-uploads/sites/2148357424/themes/2160391201/downloads/3c88b52-7acc-2ee8-73e3-6f75a85b6b8_Mosvita-Regular.woff') format('woff');
}
@font-face {
font-family: 'Mosvita-Medium';
src: url('https://soundhaus.mykajabi.com/resource_redirect/downloads/file-uploads/sites/2148357424/themes/2160391201/downloads/7a475ff-24f-f26-3c7-a17a4b54718_Mosvita-Medium.woff') format('woff');
}
@font-face {
font-family: 'Mosvita-ExtraBoldExpanded';
src: url('https://soundhaus.mykajabi.com/resource_redirect/downloads/file-uploads/sites/2148357424/themes/2160391201/downloads/cf2f36d-be51-67a3-ca86-d1655f416c_Mosvita-ExtraBoldExpanded.woff') format('woff');
}
/* Apply Mosvita-ExtraBoldExpanded to all H1-H6 elements */
h1,h2,h3,h4,h5,h6 {
font-family: 'Mosvita-ExtraBoldExpanded', sans-serif;
}
/* Apply Mosvita-Medium to all P (paragraph) elements */
p {
font-family: 'Mosvita-Medium', sans-serif;
}
I’d like test my subscription widget with the fonts but can’t figure out where to add the code (ie: on elftsight or in the CSS block where the widget exists), or if I’m putting the right code in.
Right now the below exists without any additional styles in the custom CSS block:
Where and what do I add to select one of my installed custom fonts?
Thanks in advance!
2 Likes
Max
February 24, 2025, 1:33pm
3
Hi there, @Jonathan_Ojeda
I’ve checked your widget and see that you haven’t added any fields there, only reCAPTCHA. You’d like to change the font of all widget elements and the needed font is added to your website, right?
If this is the case, just choose the Default option for the Font setting on the Appearance tab and the font from your website should be applied to the widget:
If this doesn’t work for you, please send me a link to the page where your widget is installed
1 Like
Hi Max, thanks for the response!
The fonts have been added but they are custom fonts (native Kajabi fonts). The fonts are correctly working across all of my pages. The fonts were first uploaded to Kajabi and then I added the below code to the home page custom code section in settings for them to be recognized:
@font-face {
font-family: ‘Mosvita-BoldExpanded’;
src: url(‘/resource_redirect/downloads/file-uploads/sites/2148357424/themes/2160391201/downloads/42d4588-080-06f7-4080-8fa3f2b27fe_Mosvita-BoldExpanded.woff’) format(‘woff’);
}
@font-face {
font-family: ‘Mosvita-MediumExpanded’;
src: url(‘/resource_redirect/downloads/file-uploads/sites/2148357424/themes/2160391201/downloads/ea1de4-f0f3-d6df-baa5-a70a5741da1_Mosvita-MediumExpanded.woff’) format(‘woff’);
}
/* Apply Mosvita-BoldExpanded to all H1-H6 elements */
h1, h2, h3, h4, h5, h6 {
font-family: ‘Mosvita-BoldExpanded’, sans-serif;
}
/* Apply Mosvita-MediumExpanded to all P (paragraph) elements */
p {
font-family: ‘Mosvita-MediumExpanded’, sans-serif;
}
I also set the widget to default as you suggested but unfortunately, no luck.
Below is a screenshot of the widget font settings. No code is being used in the Custom CSS section.
Let me know what you think and thanks in advance!
J
2 Likes
Max
February 25, 2025, 10:19am
5
Got it!
Please send me a link to the page where your widget is installed. I’ll be happy to check it
1 Like
Sure thing: www.soundhaus.studio
Thank you!
2 Likes
Max
February 25, 2025, 12:57pm
7
Thanks! If I got you right, you’d like to change the font of the title only.
For this, I’ve added this code to the Custom CSS field on the Appearance tab of your widget’s settings:
[class*="WidgetTitle__Header-sc"] {
font-family: 'Mosvita-BoldExpanded', sans-serif;
}
Check it out and let me know if you like the result
1 Like
This is fantastic, thank you! How would I update it to change the font for the Submit button as well (Where it says “Do It”)?
Thanks so much for this!
J
1 Like
Max
February 26, 2025, 10:24am
9
Sure! I’ve added this code to the Custom CSS field for the Submit button:
[class*="ButtonBase__Ellipsis-sc"] {
font-family: 'Mosvita-BoldExpanded', sans-serif;
}
Please check it and let me know if it’s fine
Wonderful. Thank you so much Max!
That’s all I need at this point.
Have a great week
Best,
J
2 Likes
