Google Fonts CSS API update

[rodrigoalcarazdelaosa]

Feature Request

Is your feature request related to a problem? Please describe.
No, but with this update variable fonts are supported, and it's the default link for Google Fonts now.

Describe the solution you'd like
Update the link when embedding Google Fonts according to this guide. It seems the only change is using css2 instead of css.

Line 120 of the /layouts/partials/site-head.html file:
<link rel="stylesheet" {{ printf "href=\"https://fonts.googleapis.com/css?family=%s&display=swap\"" . | replaceRE "\\|" "%7C" | safeHTMLAttr }}>

Describe alternatives you've considered

Additional context

[supcik]

I am also interested in this feature, but we have to be careful and not break the compatibility with existing sites. If the CSS API V2 is compatible with the first version, then just adding the "2" in the URL is OK, but I am not sure that the CSS API V2 is compatible with V1 href.

One option could be with another variable (e.g. google_fonts_v2) and add the following code to the template:

  {{ with ($scr.Get "google_fonts_v2") }}
  <link rel="stylesheet" {{ printf "href=\"https://fonts.googleapis.com/css2?%s&display=swap\"" . | safeHTMLAttr }}>
  {{ end }}

Note : I would leave the family= in the variable and not in the template, because family is repeated if you download multiple fonts. The code for replacing the pipe "|" is no longer needed because V2 does no longer use the pipe symbol (it repeats family= instead (https://developers.google.com/fonts/docs/css2#multiple_families).

Another option could be to "inspect" the content of the variable and choose the appropriate URL. We could, for example, decide that if the variable starts with "family=", then we use the CSS API V2, otherwise we keep the V1. Something like this (NOT TESTED)

  {{ with ($scr.Get "google_fonts") }}
  {{ if hasPrefix . "family=" }}
  <link rel="stylesheet" {{ printf "href=\"https://fonts.googleapis.com/css2?%s&display=swap\"" . | safeHTMLAttr }}>
  {{ else }}
  <link rel="stylesheet" {{ printf "href=\"https://fonts.googleapis.com/css?family=%s&display=swap\"" . | replaceRE "\\|" "%7C" | safeHTMLAttr }}>
  {{ end }}
  {{ end }}

I would be happy to contribute with a tested PR if you agree.

[gcushen]

@rodrigoalcarazdelaosa thanks for the heads up on Google's new API version. The solution is perhaps not that trivial (the Google docs refer to other changes) and there's also the consideration @supcik mentioned of breaking existing sites.

Feel free to open a PR for the community to comment on and review :)