SOLVED: Custom fonts don't display in the editor?

I’ve added a custom font. In my theme style I’ve set this custom font to be used for all headings. In the editor, the font for headings is still the default (looks like Helvetica). However on the front end the heading font is displaying as it should. Note that the body text font is set to a Google font and it looks fine in the editor and on the front end.

Another thing to note is that I uploaded the fonts to a “fonts” folder in the Uploads folder, and specified the path to them. I didn’t upload them as WP media (because it was not allowed).

What am I doing wrong?

Hey @ainom

Did you add these via custom font settings in the bricks menu (custom fonts) or as a CSS @fontface? From the sounds of it, it sounds like the latter and the builder is not rendering the font inside the builder.

Also when you tried to add the font did you try to upload these manually via FTP/SSH/Filemanager? Or again did you try adding these in the dedicated custom fonts? Either way, this sounds like a permissions issue, you would need to edit the permission to 755 ideally.

Hi Eric,

sorry I can’t reproduce issues with custom fonts. I did a quick screen record uploading a custom font: https://vimeo.com/661895598/c9c1c6aaa2

The only thing you have to take care of is uploading the correct file format. When you try to upload a ttf file to the woff2 field, it won’t allow.

How and where did you specify the path to your custom fonts? When I try to manually insert the path in the custom font fields, it gets removed :thinking:

Best regards,
timmse

Thanks Timmse, your video was helpful. It explained why I was getting errors when uploading font files. I was uploading all font file variations after clicking the upload button, but as you pointed out one can only select .woff files when clicking the woff upload button and .woff2 files when clicking the .woff2 upload button. As we’re used to no restrictions on the types of files when uploading via drag-and-drop through the media library, the expectation was that I could upload all font files at once then just select the one I needed. The label in the top left corner “Upload .woff font file” was never seen until you pointed it out.

Anyway, I have my font files set up in the same way you did in your video:

…but they still do not display inside the builder (they do on the front end).

Builder:

Front end:

Ok, at least we’re one step closer :smiley:

Is it a live site so you can provide login credentials to help@bricksbuilder.io (+ short description of your problem and a link to this thread)?

Luis or I will then take a look at it.

Will do. Thanks…

Here’s some extra text.

Seems to be fixed! After selecting a font-weight the correct font showed up instantly :sweat_smile: I set Museo in your Theme Styles for all headings.

Best regards,
timmse

Ahh…actually makes sense…need to select the weight, I guess it doesn’t default.

Many thanks.

Jep, I think it worked in my test without any problem because of the default 400 font-weight. Problem solved! :partying_face:

1 Like