Making Google Fonts code HTML5 valid

Google Fonts are great for embedding on your website but Google’s code snippets which are provided for you to cut and paste aren’t actually HTML5 valid. This means your lovely code is spoiled by this oversight. Luckily it’s a quick and easy fix and is caused by the ‘pipes’ (|) – also known as straight lines or vertical bars – in the stylesheet URL Google provide. Currently, Google Fonts provide you with code that looks something like this to put in your <head>:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic|PT+Serif:400,400italic"> 

Instead, replace those ‘pipe’ (|) characters in the URL with the ASCII character-set equivalent %7C to remove the invalidation, like so:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic%7CPT+Serif:400,400italic">

And hey presto, your page is once again HTML5 valid. You can even URL encode the whole of the URL if you’d like. This handy URL encoder will do it for you. Enjoy!

[browser-shot width=”600″ url=”https://www.google.com/fonts”]

p.s. If you need further help with other tricky characters, you can refer to this W3 Schools page on URL encoding.

Leave a Reply