Feature: Work with new Google Material Fonts

[artus70]

Hi!

I just tried the EXT with this font:

https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200

On the first try, it did nothing. Then I replaced
return (bool)preg_match('/^https?:\/\/fonts\.googleapis\.com\/css\?/i', $url);
with
return (bool)preg_match('/^https?:\/\/fonts\.googleapis\.com\/css2?\?/i', $url);
(added 2? in /Classes/LoaderGoogleFontLoader.php, line 12).

Now it partly works (font files are stored and used locally) but it doesn't show the correct font details. It should look like this:

But it does look like this:

So the style details such as font weight and outline are not respected.

EDIT: I just found out that it doesn't recognize this additional css setting:

font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24 !important;
So it is displayed as filled even if FILL is set to zero. Same with the wght setting.

These are my additional settings to achieve the outlined, bolder look:

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 500,
  'GRAD' 0,
  'opsz' 24;
  font-size: 30px;
  margin-right: 8px;
}