SOLVED: Custom Font not working with Span Tag

Bugs
1

Bricks Version:1.5.3
Chrome/105.0.0.0
Windows 11
(Frames – Boilerplate)

Using a span tag on a H1. Like this: CAPTURING LOVE, LAUGHTER & EVERYTHING IN BETWEEN.

But no matter what I do I cant get the hero-bravo__heading-span class to show my custom font. Here is the CSS used to call it.

.hero-bravo__heading-span {
font-family: “AlternateGothicCompATF-Bold”;
color: red;
font-weight: 700;
}

I can change it the span to red with no issue, but cant call the custom font, calling a google font works but not the custom one. Inspector is showing the font as AlternateGothicCompATF-Bold which is the correct custom font yet its not rendering in the builder or the front end.

2

Hi Dan,
Thanks so much for your report!

The reason is simple: you don’t use the font in any Bricks element - only then is the font-face rule added so the font can be loaded.

Just add the font-face rule to your custom CSS, and it will work :slight_smile:

How to get the rule? Add an element, set the font-family to the font of your choice, check the source code on frontend and you’ll find something like this:

/* CUSTOM FONTS CSS */
@font-face {
	font-family: "IBM Plex Mono";
	font-weight: 300;
	font-display: swap;
    src: URL(....);

Copy it and add it to your custom CSS.

Best regards,
timmse

3

Timmse,

that worked perfectly. Thank you!

1 Like