Google fonts URL break HTML5 Validation on w3.org

I load 3 fonts in different sizes using this HTML tag:

<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|Bree+Serif">

Till ~1/2 weeks ago this was supported by w3.org validator for HTML5; now it gives this error:

 Line 14, Column 163: Bad value http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic|PT+Serif:400,400italic|Bree+Serif for attribute href on element link: Illegal character in query: not a URL code point.

What's the things the W3C Markup Validator does not like now?

URL encode the | (pipe characters) in the href attribute (%7C):

<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%7CBree+Serif">

html - Google fonts URL break HTML5 Validation on w3.org, Till ~1/2 weeks ago this was supported by w3.org validator for HTML5; now it gives this error: Line 14, Column 163: Bad value  First, thank you many for your effort! Unfortunatelly, Google fonts URL break HTML5 Validation on w3.org. URL comes from module google_fonts_api from file google_fonts_api.module, from line 119 $url = $base. implode('|', $families). '&subset='. implode(',', $all_subsets);

http://www.utf8-chartable.de/

You must replace the character | by its corresponding UTF-8 character, which gives

href="http://fonts.googleapis.com/css?family=Cookie%7cAmaranth%7cKaushan+Script%7cCousine%7cBilbo+Swash+Caps%7cRancho&amp;effect=shadow-multiple"

Google fonts URL break HTML5 Validation on w3.org, Hi,. Would be possible to fix a problem with w3c validation, please? It is in a file inc/typhography.php line 90. a '|' separator is a problem. Google fonts URL break HTML5 Validation on w3.org (5 answers) Closed 5 years ago. I'm working on an assignment, and I am using Google Fonts for my site.

There are 2 ways to fix this validation problem:

  1. URL encode the | (vertical bar/line) character in the href attribute of the link element (as %7C) :

    <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%7CBree+Serif">
    
  2. Separate fonts inclusion with multiple link elements :

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

W3C validation doesn't recognize Google fonts anymore?, Went to check the HTML and received an error re:Google fonts. .com/questions​/22466913/google-fonts-url-break-html5-validation-on-w3-org  Google webfont breaks w3c validation. You should urlencode the pipe character. https://stackoverflow.com/questions/22466913/google-fonts-url-break-html5-validation-on

My case was crazy line break character. Please see the attached image.

Google fonts URL break HTML5 Validation on w3.org [#2449413 , First, thank you many for your effort! Unfortunatelly, Google fonts URL break HTML5 Validation on w3.org. URL comes from module  Participate in discussions with other Treehouse members and learn. W3C validation doesn't recognize Google fonts anymore? 22466913/google-fonts-url-break

I scape & with "& amp;" and works fine, example:

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css' />

W3 Validator error when requesting multiple google fonts family , Google fonts URL break HTML5 Validation on w3.org <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open  Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. w3schools .com THE WORLD'S LARGEST WEB DEVELOPER SITE

pipe character failing W3C validation · Issue #172 · bigcommerce , Looks like we have to encode that "|" see: http://stackoverflow.com/questions/​22466913/google-fonts-url-break-html5-validation-on-w3-org  W3.CSS pages are easy to read, even for people with slight reading disabilities. Headings should be used for what they are: Headings. With W3.CSS, font sizes can be set by the following w3-size classes: Overriding the W3.CSS default settings is very easy. In the head of your web page (or in your style sheet), after loading W3.CSS, change the

Using Google fonts: however, the code is not valid HTML5 according , paper/lib/fonts.js Line 57 in f9a90fc return ` `; Is it possible to use something /​22466913/google-fonts-url-break-html5-validation-on-w3-org  CSS Validation Service. Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets. By direct input. Interested in “developing” your developer skills? In W3Cx’s hands-on Professional Certificate Program, learn how to code the right way by creating Web sites and apps that use the latest Web standards. Find out more!

HTML 5.2, This question already has an answer here: Google fonts URL break HTML5 Validation on w3.org 5 answers I'm working on an assignment, and I am using  This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. If you wish to validate specific content such as RSS/Atom feeds or CSS stylesheets, MobileOK content, or to find broken links, there are other validators and tools available.

Comments
  • Is this an issue with Google generated URL or an issue with w3 validator? Does any spec actually require pipe character to be encoded in HTML attribute?
  • @MikkoRantalainen, RFC 1738 notes that the pipe character is unsafe: Other characters are unsafe because gateways and other transport agents are known to sometimes modify such characters. These characters are "{", "}", "|", "\", "^", "~", "[", "]", and "`".
  • I would expect raw UTF-8 to be valid in UTF-8 encoded HTML without encoding other characters but those used for HTML e.g. &, " and '. And those special characters would need to be encoded by HTML rules (e.g. &amp etc). The user agent is then expected to follow RFC 3987 and convert the IRI to percent encoded UTF-8 before submitting it over HTTP (tools.ietf.org/html/rfc3987).
  • I know this is older post, but does anyone know if there is any performance (dis)advantage to separating <link> tags? Does Google compress if multiple fonts are in one call?
  • @PatrickMoore 2 things: a) your server upload/response speed vs your end-user download speed b) time to create another connection (server response time vs end-user response time), theoretically, if you are loading 2 "heavy" fonts and your page is otherwise loading fast, loading them separately (in a paralel way) could result in faster load. But it really depends on a) & b)
  • This question is about | character, not & ;-)