Generated font URL uses pipe which is invalid character in path

[edhgoose]

When generating a set of fonts on fonts.google.com, a URL is generated like this:

<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaijaan|Slabo+27px" rel="stylesheet">

According to the URL spec (best described by this issue comment I believe: symfony/symfony#23944 (comment)) and answers such as this on StackOverflow, or this bug or this suggest that | is causing the problem.

Changing the URL to use %7C instead of | like this:

<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaijaan%7CSlabo+27px" rel="stylesheet">

seems to be the universal solution, which works in browsers consistently and matches the URL spec.

Would it be possible to do this by default? For context, we have non-technical users who are pasting the Google Font URL into a box which is then validated for being a valid URL, and unfortunately, the validator fails (correctly, as per the issue above) with |.

[curry684]

I believe it would be better to silently migrate to an acceptable delimiter. ! or $ would work fine in this case, and allow for full backwards compatibility with existing implementations and URLs. Pre-escaped URLs might get double escaped by some implementations.

[davelab6]

Thanks for the feedback on this; its a known issue with the fonts.google.com directory.

[nickserv]

Either escaping the | character or using a different one would be great. I had to modify my source to manually escape | because it (correctly) breaks v.Nu.