Roboto Fonts

[brianteeman]

1. Is it really necessary to load both the regular and the bold versions of the font when loading the local version. We dont do that when we load the google version.

2. The local version is massively bigger
   Font size from google 15.8kb
   Font size from local 130kb (65 +65)

[richard67]

The size of the local font is bigger because it contains more character sets than Latin, while those loaded from Google Fonts are separate files for character sets (in the css: Unicode ranges).

[brianteeman]

and the reason for loading regular and bold ?

[richard67]

You mean in the css file media/vendor/roboto-fontface/scss/roboto/roboto-fontface.css? That's a vendor file, not maintained by us.

[brianteeman]

when loading from google

when loading local

google version

[richard67]

@brianteeman Not sure if I understand right: The first screenshot shows what is loaded when using font scheme "Roboto + Noto Sans (web)", and the 2nd one shows what is loaded when using font scheme "Roboto (local)"?

[brianteeman]

Yes that is correct.

In the first screenshot only one roboto font file is loaded
In the second screenshot there are two roboto font files loaded

[richard67]

The "Roboto + Noto Sans (web)" uses "Roboto" for the headings and "Noto Sans" for "normal" text (body, ...).

The "Roboto (local)" uses that font for both headings and "Normal" text. Headings are bold, normal text not.

Does that explain it? Let me know if not.

Beside this: I know the local fonts implementation could if not even should be improved.

But we were limited by the following:

1. We shall not add a new 3rd party dependency.
2. When we started with developing the local fonts, we wanted to establish a way how to manually maintain them in our source code, open for later adding of more fonts by the site admin. But we were accused to pollute the installation and sources in this way with too much stuff (or to use Joomla as a trash can or something like that), so we decided to start with what we have and see if we later can extend that.
3. Due to the way how most if not all npm packages which offer local Google Fonts work - they all seem to use https://google-webfonts-helper.herokuapp.com/fonts, the font files are bigger because they combine the different character set into a font file and the css looks like media/vendor/roboto-fontface/scss/roboto/roboto-fontface.css, in opposite what you can see e.g. when checking the content of https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap, where smaller font files are used for particular unicode-range.

We decided to use what we have and later see if it is possible to improve that.

But if you have ideas, or if you see we load more font weights than necessary, let us know.

Thansk for your reviews and tests so far.

[brianteeman]

Ok I think I understand you now. I am really not impressed with this local font thing. Especially as its the default. Its addressing an issue which only one country seems to have and is impacting the performance for everyone. If a user really wants to not use google fonts then that should be their choice and not something forced upon them. There are even options for privacy focussed google web fonts such as https://fontless.varld.co/

[richard67]

@brianteeman And I pretty much understand your concerns and points. We can collect more opinions and easily change the default if that's desired.

We decided to use it as default because of that privacy issue of which I think it won't be an issue anway in near future because either US and EU agree a new kind of safe harbour or privacy shield or however they call it, or they have to make an intranet in EU to replace internet and cut all cables betwen the EU and the rest of the world ;-)

[richard67]

I think whatever we will do will be wrong: If we make web fonts the default, people in EU will complain it is not safe regarding GDPR, and if we make local fonts the default, people outside EU will complain about performance issue and too big font file, and in both cases we can write the best documentation and add hints about that to every release announcement, but people very likely won't read that.

[richard67]

Regarding https://fontless.varld.co/: I could read in their readme on GitHub that they also use google-webfonts-helper, so it's very likely that they don't use separate different particular charactersets and the unicode-range but combine all available character sets into one font file. So the "bigger file problem" would also exist here.

[brianteeman]

yes but they dont do any tracking and its self hosted - that was the point

[richard67]

Yes, that's true, and they offer so send it to a CND so no performance issue on the server.

The good thing is: With our font schemes one can use any font from web, not only Google fonts.

It just needs to specify the right URL in the SCSS for the font scheme. So one could use https://fontless.varld.co/ from the Vercel where they send the fonts and css to, or one could pack own fonts (and that can be done in a way so the character sets can be separated into separate smaller files) and copy that to the CDN of his or her choice.

Now in the core it is hard-coded in the template's index.php, so one would have to make a template copy just for changing that.

It is worth a discussion if we could add a web based font scheme using that, in addition or as replacement for the Google Fonts (but again, this would mean larger font file). But in this case we either should make a 3rd group for fronts from web but being safe, beside the local and web groups in the grouped list field, or we have to change that yellow warning box telling about privacy issue with web fonts.

[richard67]

Hmm, thinking over it, for adding a new font scheme one has to add it to the templateDetails.xml, and if that shall be safe from being overwritten by a core update, one would have to copy the template, too. So not a big difference, I admit.

[dgrammatiko]

FWIW there are tools (npm) that will download a google version of any font (with all the optimisations) So you get all the things for free (perf, small size, any G-font).