Failed to load resource: the server responded with a status of 400 (Bad Request)

[charlesajones]

Hi There,

Getting this error on Chrome using Twenty Fifteen theme and Styles: Twenty Fifteen "Failed to load resource: the server responded with a status of 400 (Bad Request)". Also have some reports on apple and mobile devices.

Steps to reproduce:

1. Navigate to Appearance > Customize
2. Select Header > and for Title choose a Google Font (ie. Oswald or Droid Sans).
3. Publish, load site in Chrome, Open Console
4. Expected behavior, the font loads with no errors
   4b. Unexpected behavior, there is an error in the console.

Some times the error is - "Failed to load resource: the server responded with a status of 400 (Bad Request)"

Other times its - "GET https://fonts.googleapis.com/css?family=Open\2bSans\3a300,300italic,regular,italic,600,600italic,700,700italic,800,800italic net::ERR_ABORTED
(index):63 GET https://fonts.googleapis.com/css?family=Open+Sans%F0%BA%8C%80,300italic,regular,italic,600,600italic,700,700italic,800,800italicnet::ERR_ABORTED"
Where "+" is replaced for "\2b" and ":" for "\3a", and where "%F0%BA%8C%80" replaces ":" in the second error.

Look like it may have something to do with this section...

styles.1.2\styles\classes\styles-control-text.php:
107 $import_family = $this->encodeCssValue($font->import_family);
108 $styles = Styles_Plugin::get_instance();
109: $styles->css->google_fonts[ $value ] = "@import url(//fonts.googleapis.com/css?family={$import_family});\r";
110 }

Any ideas or guidance is much appreciated. I'm happy to provide a patch/pull request, assuming it's a bug and someone can provide some guidance.

Kind Regards,
Charles