Google Fonts Generates Invalid HTML

Screen shot 2014-11-22 at 10.33.11 AM So if you go to Google Fonts and pick a couple of funky fonts for your next super funky web app, you might get something that looks like this from Google.

<link href='http://fonts.googleapis.com/css?family=PT+Sans|Anton' rel='stylesheet' type='text/css' />

That’s what Google tells you to use in your markup to access those fonts. It technically works, but if you stick that in your head and try to validate your HTML with the W3C validator, you’ll get an error that looks like this.

Bad value http://fonts.googleapis.com/css?family=PT+Sans|Anton for attribute href on element link: Illegal character in query: not a URL code point.

The issues are related to that plus-sign and vertical bar. What you need to do is this.

<link href='http://fonts.googleapis.com/css?family=PT%20Sans%7CAnton' rel='stylesheet' type='text/css' />

You can find URL encoding characters here.

Share Button