A google font by the name Unbounded is missing from the bricks font list

There’s a google font called Unbounded https://fonts.google.com/specimen/Unbounded

and I am not able to find it in the bricks font list

@timmse - please help

@richagotech Fast shot: you can find all Google fonts as downloads. Upload the font and integrate it in the Backend Bricks → Custom Font.

tried that but the font was only being rendered on builder interface and not the frontend. Regenerated css, cleared cache, tried different browser but it did not work.

I have never used this custom font feature. I have used my fonts via css already before the custom font feature was available. But if you integrated the font like this and it works in the editor and not on the frontend, then it sounds like a bug to me.

Can you guide me how to load fonts via css and be able to select it from bricks drop down?

@richagotech I downloaded the font and tried to install it using the Bricks function. But I can’t even select it in the editor drop down! So that does not work. How to make it selectable in system with PHP, I would have to look first. But since you have little technical knowhow, I would use a simple variant (which I also use myself).

Copy in the admin under Bricks → Settings → Custom code the code below into the Custom CSS field.

@font-face {
    font-family: unbounded;
    src: url('/wp-content/uploads/Unbounded-Regular.ttf');
    src: url('/wp-content/uploads/Unbounded-Regular.woff2');
    font-weight: 400;
    font-style: normal;
}
.unbounded{
	font-family: unbounded;
}

If your files have other names you must correct the name in the code. Or if you have files in other formats, you can add lines according to the other ones. Then create a class with the name unbounded in the editor. Now you can select this class for the elements that should be in this font. This code is tested, I have tried it on my website to avoid any typos…

Thank you so much for the detailed response. I will try to implement this.

I would highly recommend to implement the font locally.
I also recommend for that Matthias Altmanns script: Matthias Altmann • Code Snippet: Eigene Schriftarten in Oxygen und Bricks integrieren

Here you can download Unbound as package: https://webfontloader.altmann.de/

Install the script, upload the fontfolder via ftp and your done. :slight_smile:

This looks easy, thanks for this. @sebastianberger

1 Like

Hi @richagotech,

You can’t find it on the list because Bricks use a fixed list (a JSON file) that is bundled into the theme zip file. So you will not find the Unbounded font because it may not exist on the fixed list, the JSON file.

You can use the one-click Google Fonts self-host from Yabe Webfont and you will be able to use the Unbounded font.

No FTP and manual upload is required, and no snippet/script is required. It’s a one-click way!

Yes. I found Yabe Webfont so convenient. Great plugin!