Fix font-display for Google Fonts

[csabapalfi]

Google Fonts shipped the display flag in May: https://addyosmani.com/blog/google-fonts-font-display/

This PR makes use of that new feature to add font-display: fallback in Google Fonts CSS via the display=fallback query param.

This will remove the following error under Diagnostics in Google PageSpeed Inisghts: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fnodejs.org%2Fen%2F

[XhmikosR]

I thought they have a default which is swap, so this change seems redundant?

https://css-tricks.com/google-fonts-and-font-display/

Also, Source Sans Pro is used everywhere.

[csabapalfi]

It's not default unfortunately.

Try comparing the response to these:
https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600&display=swap
https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600

[csabapalfi]

$ curl --silent "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600" > default.css
$ curl --silent "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600&display=swap" > swap.css
$ diff default.css swap.css 
4a5
>   font-display: swap;
10a12
>   font-display: swap;

[csabapalfi]

Another thing that comes to mind is why we're loading this font on all pages? Isn't that only used on pages with code examples? Happy to raise another issue to start a discussion about that.

Removed this from the PR description as @XhmikosR confirmed the font is used everywhere.

[XhmikosR]

Might be the default in the snippet they offer when copying. If so then this change makes sense.

Personally I tend to use fallback, but this depends on the project.

[csabapalfi]

Happy to change to fallback. For anyone wondering what's the difference check out this great explainer: https://font-display.glitch.me/

[csabapalfi]

Changed to fallback.

[XhmikosR]

I don't mind either way personally, I was just saying what I use most of the time :)

Either way, it's an improvement for sure.

[Trott]

@nodejs/website

[XhmikosR]

@csabapalfi: can you make the same change in core?

[Trott]

@csabapalfi: can you make the same change in core?

The relevant file is https://github.com/nodejs/node/blob/master/doc/template.html.

[XhmikosR]

Yeah, I know, but I thought someone else could tackle this. :) No worries, I'll make a PR myself.

[csabapalfi]

@XhmikosR you beat me to it! Great stuff! Thanks for pushing this ahead!

[Trott]

Yeah, I know, but I thought someone else could tackle this. :) No worries, I'll make a PR myself.

Oh, I was actually nothing that for @csabapalfi's benefit, but whatevs, as long as it gets updated, I don't really care who does it. :-D