Fonts / javascript loaded from external sources

[DRMasterChief]

Hello, BEFORE the update to 1.5.1 we had changed all externally loaded data sources (e.g. fonts) so that all fonts are loaded internally on the server  (copied them via FTP to our webspace).
Now since 1.5.1 I see that the following 3 things are loaded externally:

https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js

   src: url(https://fonts.gstatic.com/s/opensans/v40/memtYaGs126xyz1234567890....woff2) format('woff2');

and the font opensans/v40 from fonts.gstatic.com

Did the update to 1.5.1 cause this?

Unfortunately this is not communicated anywhere by tb.
In our case it is very important because of the information requirement about cookies.
Where can I change that again?

[datakick]

45 minutes ago, DRMasterChief said:

Did the update to 1.5.1 cause this?

Unfortunately this is not communicated anywhere by tb.

not thirty bees core / theme related

[30knees]

46 minutes ago, DRMasterChief said:

Did the update to 1.5.1 cause this?

We also load locally and nothing changed after the update. I just checked.

[DRMasterChief]

so it is only from Cookieconsent module do you think?   Can i check this anywhere (deactivate this module should do it)?

[Adik]

1 hour ago, DRMasterChief said:

 

Where can I change that again?

The quickest way is to check where is "fonts.gstatic.com" / "cdnjs.cloudflare.com" saved.

Install Visual Studio Code and connect with your VPS using ssh. Now you can search thousands of files in few seconds using the options Find in Folder.

You can also add: Smarty Template Support, The Pattern Language (TPL) and tpl Lang addons.

Edited April 25 by Adik

[DRMasterChief]

Thanks for this, but i dont have ssh.  Maybe i will try  'SearchMyFiles'  on Windows.

[the.rampage.rado]

This module called the Google server since it was published I think.

As we're on the topic of loading fonts locally, what formats are you still loading in 2024? Only woff2 or all other in case a fallback is needed?

[DRMasterChief]

from each font i have (locally)  eot / eot?#iefix / woff2 / woff / ttf / svg

e.g. like this:   font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v15.....

and maybe i have to add the  v40  ????

found this: https://stackoverflow.com/questions/22295165/googles-open-sans-regular-400-always-italic 

 

I have done a search and the loaded files from my question are in modules \authorizeaim   and in \nocaptcharecaptcha  and in  admin\filemanager

Edited April 25 by DRMasterChief

[DRMasterChief]

i found the  https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js 

in   modules\eucookieconsent\views\templates\hooks\cookieconsent.tpl

Is it possible to load this file locally from server? 

[Adik]

copy file cookieconsent.min.js locally and add to header.tpl

<script src="/modules/eucookieconsent/views/js/cookieconsent.min.js" defer></script>

 

[the.rampage.rado]

7 hours ago, DRMasterChief said:

from each font i have (locally)  eot / eot?#iefix / woff2 / woff / ttf / svg

e.g. like this:   font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v15.....

and maybe i have to add the  v40  ????

found this: https://stackoverflow.com/questions/22295165/googles-open-sans-regular-400-always-italic 

 

I have done a search and the loaded files from my question are in modules \authorizeaim   and in \nocaptcharecaptcha  and in  admin\filemanager

From what I can find online (and is not posted in 2012) and what I get from it is that woff2 is the only format we need currently as all modern browsers (mobile and desktop) support it. So I only load it locally.

A nice read: https://stackoverflow.com/questions/75868078/what-are-the-possible-values-for-format-in-a-font-face-src
A nice tool to download only the needed fonts and generate the code for them: https://gwfh.mranftl.com/ 

Regarding the font version - I think if you load only one version and stick to it it's OK, no need to load 2 or more versions as this might confuse (probably) different browsers to render your page differently if they fall back to one or another version and there are differences between them. (Let's say for Montserrat that I use, they have weight changes between versions).

Also, if the tool for generating the code you use does not add it do so manually:

font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */

A statistic: https://caniuse.com/woff2

[DRMasterChief]

Thanks for the kind tip!  The caniuse... is helpful.  I have already the  font-display: swap;

now i have deleted all 'old'  Open Sans fonts and installed only the new ones (v40),  i have also changed my  global.css  in themes folder with the new information.

But something I don't know is still connecting to fonts.gstatic.com as you can see here, and i really do not want to have this  👮‍♂️ 😟

 

Edited April 26 by DRMasterChief

[30knees]

Perhaps you need to test by disabling modules one by one?

[DRMasterChief]

done, but i cant find anything in this direction,  makes me crazy...

[the.rampage.rado]

With this specific weight string I'm pretty sure that there is misconfiguration on your side, could you double check the theme module that's responsible for the fonts?

[datakick]

I've moved this discussion to separate thread, as it has not much to do with 1.5.1 release announcement 🙂

[DRMasterChief]

Great to have an separate thread now  👌   @the.rampage.rado:

I have used SearchMyFiles again, now i found the following  config-php-file in modules in my Theme.   I did not find it before via the Software, not sure why....

So this is the part which loads from googleapi :

 

/* HOOK (displayTop)
 /*-------------------------------------------------------------*/
    public function hookDisplayHeader()
    {
        $google_webfont_url = '';

        if (!$this->prepareHook()) {
            return;
        }

        // sans-serif
  if (Configuration::get('FONT_FAMILY') == '\'Open Sans\', sans-serif' || Configuration::get('TITLE_FONT_FAMILY') == '\'Open Sans\', sans-serif') {
            $google_webfont_url .= 'Open+Sans:400,800,700,400italic,300italic,300|';
        }

 if ($google_webfont_url != '') {
            $this->context->controller->addCSS('//fonts.googleapis.com/css?family='.$google_webfont_url);
        }

 

When i go directly to  fonts.googleapis.com/css?family=Open+Sans:400,800,700,400italic,300italic,300|  - you can try this for your own,  a lot of css  as expected,   no problem so far.

In this css from google  i can see the 2 fonts, which was loaded to my Theme,  e.g. this one:

https://fonts.gstatic.com/s/opensans/v40/memtYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWqWuU6F.woff2  (a click will download it!)

 

So does this mean i have to download these 2 files (or all named on this css) and copy them locally to the server as usual?

Strange, why is this?

Edited April 26 by DRMasterChief

[the.rampage.rado]

To be honest I don't know why they hardcoded this in this part of your theme/module.

I'm not able to help with this one but probably you can contact the developer and check with them?

[DRMasterChief]

It is strange,  because this i can find  'only' in the module which is for themeconfigurator,  but i do not have anything configurated/change by this.  At the moment i am playing around and add this  to the  @font-face  (i have seen this in the loaded code, so maybe it must be given also in the local fonts):

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

also another hint found here: css - Google Fonts provides different WOFF2 files between Chrome and Chromium - Stack Overflow

Edited April 26 by DRMasterChief

[DRMasterChief]

I want to give this information to retailers who want to and need to comply with the GDPR: in maintenance mode, a font from Googleapis is also loaded.  (i am not sure if it´s by tb or by Theme, see datakick´s answer below).

Update:  tried with Niara Theme, the same  (all modules off),  strange is that there is Calibri font loaded, which is not a content of the maintenance site.  Will try and detect further...

Edited April 27 by DRMasterChief

[datakick]

40 minutes ago, DRMasterChief said:

I want to give this information to retailers who want to and need to comply with the GDPR: in maintenance mode, a font from Googleapis is also loaded.  I think this is by TB, not by Theme?!

No, it's not. Neither core, nor niara/community-theme loads fonts from google apis in maintenance mode.

It's your theme, or some module. 

[DRMasterChief]

hmm ok thank you,  i will try further,  but the maintenance site from Theme is a very clean thing and no googleapi inside.

Maybe interesting about the unicode-range, you can maybe speed up your site with this:  https://github.com/themeum/kirki/issues/2330 

[nickz]

On 4/26/2024 at 3:16 PM, DRMasterChief said:

Strange, why is this?

laziness of the developer,  many themes have google fonts due to exactly that. Its easy to use them.
It's also quite easy to use alternatives.

[30knees]

@DRMasterChiefI wouldn't worry too much about maintenance mode. The risk that someone is going to get you for Google Fonts during maintenance mode is so small. Even if: an authority would just tell you off. 99.99% sure no fine.

[DRMasterChief]

Well, of course Google Fonts are easy to implement, but I just don't want to. GDPR is another big point against it, because it is proven that more information is transferred than just the IP. And I don't want to risk any problems just because of something like that. Making money is hard enough - I don't want to have to spend it on a fine.

It's easy to solve with local loading, so let's do it. It is a question of principle whether this is done in the interest of the visitors or not.

It was difficult to find this time and apparently there are significantly more variations of the fonts and more to consider than I thought (weights, unicode and so on). Our theme is nice and clear and it seems that it uses a special weight and unicode for the main font which is used everywhere.

Thank for your ideas and help, great community!