How do I add a custom font to BaseFrame?
Less
More
-
Posts: 3
-
Thank you received: 0
-
-
5 days 12 hours ago #7
by joey
I want to use Space Grotesk instead of Inter. I know I need to edit the CSS but I am not sure which file to change.
Do I edit base.css or the adapter? And where do I put the font files?
Running Joomla 6 with the
Bulma adapter
.
Please Log in or Create an account to join the conversation.
Less
More
-
Posts: 7
-
Thank you received: 0
-
-
5 days 11 hours ago #8
by kate
Don't touch base.css — that's framework-agnostic and should stay that way.
Edit
custom.css instead. That's the file that survives template updates.
Code:
@font-face {
font-family: 'Space Grotesk';
src: url('/media/templates/site/baseframe/fonts/SpaceGrotesk-400.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
body.tf {
font-family: 'Space Grotesk', system-ui, sans-serif;
}
Put the .woff2 files in media/templates/site/baseframe/fonts/. Self-hosted, no Google Fonts dependency.
Please Log in or Create an account to join the conversation.
Less
More
-
Posts: 3
-
Thank you received: 0
-
-
5 days 10 hours ago #9
by joey
That worked perfectly. Thanks Kate.
One follow-up: the heading font is still Inter in the Bulma adapter. Is there a separate font-family declaration for headings?
Please Log in or Create an account to join the conversation.
Less
More
-
Posts: 4
-
Thank you received: 0
-
-
4 days 12 hours ago #10
by dade
The adapter CSS inherits body font-family by default. If Bulma's adapter has an explicit h1-h6 font-family, override it in custom.css:
Code:
.com-content-article__body h1,
.com-content-article__body h2,
.com-content-article__body h3 {
font-family: 'Space Grotesk', system-ui, sans-serif;
}
But honestly, just set it on body.tf and let inheritance handle the rest. Less CSS, fewer overrides.
Please Log in or Create an account to join the conversation.
Time to create page: 0.244 seconds
