I am kinda lost about google fonts and even though I tried to find some answers on the Bricks documentation I couldn’t find a solution. Basically, I know that I can select google fonts from the typography settings but that will slow the website. So am I supposed to download these google fonts, then upload them to the website via the custom fonts settings and then select them again from the custom fonts typography settings? Or do I only have to add a css link to google fonts server? Also, do I have to add a consent message on the website if I link to google fonts server? I would appreciate your help on this.
Hi alexgr, yes you have it to select from the typography setting. There’s a little subhead “Custom Fonts” in the long list of fonts. You will find your uploaded fonts there:
1 Like
Hi @alexgr,
you’re right that you have (at least) to options:
-
Simply use google fonts right out of the builder. This requires no custom setup, cdn links and so on. The downside is that you’ll need a consent notice, because a connection to the google servers is established and the ip of the visitor is transmitted.
-
Download the (google) fonts you like and add them manually to bricks » custom fonts. If the fonts are google fonts, i would recommend downloading them via the google webfonts helper. The benefit of the webfonts helper is getting all available types (woff, woff2, eot, svg) instead of ttf only files.
After saving you’ll find your custom fonts in the Typography Dropdown below the “Standard Fonts” and above “Google fonts”.
2 Likes
Hi @alexgr
Just to add, try to only use a maximum of 2 fonts for the whole website i.e. one for the body and one for headings. You would also ideally not use too many font weights which all have an impact on website performance.
1 Like
Yes I used google web fonts helper to download the fonts but instead of adding them manually to bricks >> custom fonts, I uploaded them to the theme folder inside fonts folder via ftp and then I added the css code that calls the fonts as below example to bricks >> custom css.
@font-face {
font-family: ‘Adamina’;
font-style: normal;
font-weight: 400;
src: url(’…/fonts/adamina-v14-latin-regular.eot’); /* IE9 Compat Modes */
}
Is that the correct way or do I have to add them manually to bricks custom fonts too?
It’s not not correct but probably not the most efficient.
I have not done it this way with Bricks as it is not needed so not sure of possible conflicts. Some conflicts could be:
Not having the ability to select the font inside the builder when styling.
Your font being overridden
Your font applying to all text
Personally, I would remove the @font face declaration and just follow the video.
1 Like
The advantage of downloading and using the same site/server/ip address to serve the fonts is that it makes less external calls and some firewalls, anti-virus apps, anti-tracking plugins block google calls figuring Google is IP tracking via fonts (which they are), and keeping it locally (server) caching the fonts, in addition to the same CDN.
So I guess, I’ll just follow the video.
True. You can also check out the bricks academy article: Custom Fonts – Bricks Academy
Please add a one click install or some kind of multi select…it is insane to pick 46 fonts by hand and upload them each time a font gets an update! In Europe, you need locally installed Google Fonts to buffer a “do not accept non-essential cookies” results in disabling them completely if not installed locally. We require that as fallback.
This was already requested by many others: How to Download and Optimize Any Google Font | Aleksandr Hovhannisyan
1 Like
You can use Local Google Fonts plugin to host your used Google fonts on your server.
i find it easier than uploading the fonts manually.
2 Likes