Download the variable font file, hopefully it’s woff2. If it’s a Google font, download from the Web Font Loader tool: https://webfontloader.altmann.de/
In Bricks, add the custom font and name it exactly as you want to reference in CSS/Bricks. So if you downloaded Montserrat, don’t name it “Montserrat Variable Font” or this is what you need to type in Bricks to use it. Just called “Montserrat” exactly as it would be if loading from Google.
Add all variations to the custom font. Just because it’s variable doesn’t mean you don’t have to create them. Montserrat supports 100 through 900 so add all of them you need at each weight level. Connect each variation to the same woff2 file. It would look like this:
If you wanted to add the variable italic fonts, then create all the variations again but change “Normal” to “Italic” and point to that woff2 file.
In the Bricks->Performance settings, turn on the option to disable Google Fonts. This isn’t necessary, but of course you don’t need it if you are loading local fonts. Plus we are using the same font name, it I don’t know which one would “win” when referenced.
After saving the settings, open the frontend, open web dev tools and the DOM, then search for the font name. You should see the block of CSS creating all the variations like this:
<style id="bricks-frontend-inline-css" > @font-face {
font-family: "Montserrat";
font-weight: 100;
font-display: swap;
src: url(https://aaaa.com/wp-content/uploads/2024/11/Montserrat-VariableFont_wght.woff2) format("woff2");
}
@font-face {
font-family: "Montserrat";
font-weight: 200;
font-display: swap;
src: url(https://aaaa.com/wp-content/uploads/2024/11/Montserrat-VariableFont_wght.woff2) format("woff2");
}
@font-face {
font-family: "Montserrat";
font-weight: 300;
font-display: swap;
src: url(https://aaaa.com/wp-content/uploads/2024/11/Montserrat-VariableFont_wght.woff2) format("woff2");
}
@font-face {
font-family: "Montserrat";
font-weight: 400;
font-display: swap;
src: url(https://aaaa.com/wp-content/uploads/2024/11/Montserrat-VariableFont_wght.woff2) format("woff2");
}
@font-face {
font-family: "Montserrat";
font-weight: 500;
font-display: swap;
src: url(https://aaaa.com/wp-content/uploads/2024/11/Montserrat-VariableFont_wght.woff2) format("woff2");
}
@font-face {
font-family: "Montserrat";
font-weight: 600;
font-display: swap;
src: url(https://aaaa.com/wp-content/uploads/2024/11/Montserrat-VariableFont_wght.woff2) format("woff2");
}
@font-face {
font-family: "Montserrat";
font-weight: 700;
font-display: swap;
src: url(https://aaaa.com/wp-content/uploads/2024/11/Montserrat-VariableFont_wght.woff2) format("woff2");
}
@font-face {
font-family: "Montserrat";
font-weight: 800;
font-display: swap;
src: url(https://aaaa.com/wp-content/uploads/2024/11/Montserrat-VariableFont_wght.woff2) format("woff2");
}
@font-face {
font-family: "Montserrat";
font-weight: 900;
font-display: swap;
src: url(https://aaaa.com/wp-content/uploads/2024/11/Montserrat-VariableFont_wght.woff2) format("woff2");
}
</style >
The “font-family” definition will match the name you create in Bricks when adding the font, so it would say “Montserrat Variable” if you named it different, and this is how you would reference it in Bricks/CSS.
Once everything is done, you can go in the DOM and live edit some bit of text and change the font weight, it should visibly change for each supported weight you added.
Hope that helps!
