SOLVED: Local font in custom class not uploaded on the page when the css is put in the general settings

Bugs
1

Bricks Version: 1.5.4
Browser: Any
OS: Windows
URL:
with custom css in Page settings (working): https://domini.wstudio.dev/acheter/
with custom css in Bricks settings (not working): https://domini.wstudio.dev/vendre/

I have uploaded a custom font.
Created a custom class to apply this font:

.cursive {
font-family: "Lobster";
}

Put it in Bricks > Settings > Custom code.
Then applied it in a Heading block. The font wasn’t called in the page (https://domini.wstudio.dev/vendre/)

When i put the class in the builder Settings > Page Settings > Custom code, it works.
https://domini.wstudio.dev/acheter/

2

Hi Jo,
Thanks for your report!

This is because the font-face rule is missing in the Bricks " Settings " Custom CSS. Think of the Bricks Settings styles as an external stylesheet that is basically always “bluntly” included on every page - no matter what page it is.

If you assign a custom font there, but there is no font-face rule that says where the custom font is, it won’t work either. Long story short, just add this to the settings (above the .cursive class) and it works :slight_smile:

@font-face {
	font-family: "Lobster";
	font-weight: 400;
	font-display: swap;
	src: url(https://domini.wstudio.dev/wp-content/uploads/2022/10/lobster-v28-latin-regular-1665242877.woff2) format("woff2"),
url(https://domini.wstudio.dev/wp-content/uploads/2022/10/lobster-v28-latin-regular-1665242877.woff) format("woff"),
url(https://domini.wstudio.dev/wp-content/uploads/2022/10/lobster-v28-latin-regular-1665242877.ttf) format("truetype");
}

Best regards,
timmse

3

Oh ok, thanks a lot!!

4

@timmse
So if I added 4 custom fonts, it means that I have to add @font-face x4 times, one for each font? Where in the Academy this is explained? I tried to find it to no avail!

Thank you.

5

Hey fadi,
Welcome to the forum!

No, you don’t have to. As soon as you add an element that has your custom font applied, the corresponding CSS and font-face rules are added automatically.

In Jo’s case, she added the class with custom CSS. On one of her pages, it was working because she already added an element using the same font-family on that page (so the font-face rules were added automatically). On another page, it didn’t work, because there was no element using the font-family which causes the missing font-face rules.

Edit: I was just able to confirm a bug report where there are problems with external files and custom fonts on classes: WIP: Custom Font only loading when added through ID Selector - #3 by Zachary

Best regards,
timmse