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:
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.
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.
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
Hi guys,
We live in a world where font files seem to become as complex/complicated as SVG files
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.
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!
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
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.
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.