The link about html5 validation you posted is 5 years old and my html5 wordpress page is validated without errors except the one with the google fonts.
When I escape the pipe character it is validated fine and it is still working. And it looks like other projects escaped it as well:
https://github.com/asciidoctor/asciidoctor/issues/1126
And on https://developers.google.com/fonts/docs/getting_started on the section “Optimizing your font requests” they write “As with all query strings, you should URL-encode the value”.
