SOLVED: Unable to install local fonts

Bricks Version: 1.5.2
Browser: Firefox DEV (last release)
OS: macOS

I created a fresh install with bricks 1.5.2. I deactivated google fonts and uploaded noto sans and Roboto in different weights.
Both won’t be previewed and both don’t work in editor.
If I take a look to the console I see this:

Is this already known?

Can not confirm, works.


You need to install the WOFF2 File and your custom fonts appear at the end of the list

1 Like

I uploaded the woff2 files.
I tried with activated and deactivated Google fonts.
I will check php version but it should be php8.
And as written it is a fresh installation.

Hmm. In that case I can’t imagine what causes the error. I just tried this on an older Bricks installation and works as well. Weird.

1 Like

Hey @sebastianberger

Just to double check, you are uploading these via custom fonts in Brick’s menu in the WP dashboard?

If you have uploaded them this way - When you update a font i.e. noto sans normal 400. click publish / update and then add the next weight.

Hope that helps :+1:

1 Like

I tried to upload a single font and got the same effect. I also deleted everything and started new. No change no solution.

When I add the font the preview of the font is correct. If I publish / save the font already the preview of the uloaded font is wrong.

Also the whole red colored console irritates me.

I have tested this with my Bricks test install. Here’s the screenshot of my custom fonts:

And here’s a small Gif video showing that it works as expected (also in Frontend view and Preview)
CleanShot 2022-09-16 at 10.32.45

I see no failure on my site

Ok… I’m out of ideas. New subdomain, new wordpress, new bricksinstall, no other plugins. Same problem

Created a third instance with another hoster and Bricks 1.5.2 and got the same problem.

I wrote the whole story to Thomas. I’m totally out of ideas.

2 Likes

Just idle curiosity … but where do you get your woff2 files from?
I can only seem to find the font in ttf or css stylesheets.
Never had a need for extra fonts but all this talk has got me interested.

Here: https://webfontloader.altmann.de/ :slight_smile:

You’re also able to load them from github.

Thanks, that site works fine.

So downloaded Roboto in 400 and 700. Uploaded them to Bricks.
Google Fonts is disabled.

As far as I can tell it all works perfectly. Both in the editor and on the front end.

1 Like

I have two installations that work fine. But both were only updated.
Any kind of new installation has big problems…

I think this is the best bet @sebastianberger. Not sure how it can be so localised. I have just started a new project on 1.5.2 and was able to create/add new custom fonts.

Some other variables you might wish to count out if you haven’t already are:

Fonts - source the fonts from elsewhere - I believe the two you mentioned are google fonts and I also use the site that @lego2020 shared above.
Browser - Try a different browser than FF

Timmse has been in touch and a few new things have come up.

It’s a little more stuff and I’ll wait for Timmse’s next answer before I write it down.

2 Likes

Hi guys,
We live in a world where font files seem to become as complex/complicated as SVG files :joy:

I could break the problem down to “Latin Ext” font files. With the variable “Latin” versions of https://webfontloader.altmann.de/ there seem to be no problems. I can’t say exactly what the problem with “Latin Ext” is, but we’ll have a look at it when we get a chance.

Unless the website uses only one or a few languages anyway and none of the ones available in “Latin Ext” I would prefer the normal “Latin” variant either way since the file size is much smaller.

Best regards,
timmse

2 Likes

I wish I could confirm but I still struggle with it. Noto sans and roboto flex don’t work also not with choosen latin version. :,(

edit I got it! WP Media Management is a bitch! The ext Version has the same name as the latin version. So a new upload don’t work if you not rename the file name!

Holy… what a mess!

Ok, the whole font thing is a headache… Most informations I’ll write down are from wise people like Matthias Altmann or based on the tutorial from Chris Castillo.
Also a big shoutout to @timmse who uses saturday AND sunday to investigate this problems. Thank you!

Including webfonts in bricks - my actual experience

  1. Stop using the webfonts-helper from Heroku. The “why” is explained on Matthias Altmanns Webfontloader Page.
    In short: you’ll get old fonts that causes problems on safari.

  2. a) The best way possible is to use variable Webfonts. Chris Castillo offers here a nice short tutorial. Additional: on Matthias webfontloader you’re able to set a filter to catch all variable font (click again on the filter icon to close it).

b) Google divide latin and latin-extended. If you try to load extended you only get the extra signs but not the base characterset.

c) Most fonts in a variable font package have the same name (latin + latin extended as example). If you run in the same problem as me and try to upload the latin version instead of extended don’t forget that the wordpress media library ignores newer files with the same filename. You’ll need to rename them to get it to work.

d) Bricks offer in the moment no way in the fontloader to load both. So the only way (if you need the extra signs) is to import them via extra css and @font-swap method. Best description: Web Font Loader - Font FAQ → Referencing Fonts in CSS
Maybe Thomas will offer some internal hooks for guys like Matthias that provide the ability to use extra scripts for fontloading or maybe Thomas has a better fontfunction on the roadmap.

I’ll try to keep this actual.

3 Likes