CODEWITHSUNDEEP
htmlcssfontsw3c-validation
Learning
Learning

Reputation: 20001

HTML validation generates error

I am using google fonts and it generates following error for below link

<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Merriweather:400italic|Roboto+Condensed|Source+Sans+Pro|Droid+Serif|Open+Sans+Condensed|Oswald|Molengo|PT Sans|Droid Sans')" rel="stylesheet" />

ERROR MESSAGE

Line 35, Column 289: Bad value for attribute href on element link: Illegal character in query: not a URL code point.

…if|Open+Sans+Condensed|Oswald|Molengo|PT Sans|Droid Sans')" rel="stylesheet" />

Syntax of URL: Any URL. For example: /hello, #canvas, or http://example.org/. Characters should be represented in NFC and spaces should be escaped as %20.

SAMPLE HTML

<html>
<head>

    <title>Title</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Merriweather:400italic|Roboto+Condensed|Source+Sans+Pro|Droid+Serif|Open+Sans+Condensed|Oswald|Molengo|PT+Sans|Droid+Sans')" rel="stylesheet" />
</head>
<body>
</body>
</html>

UPDATE

This generates error

 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto%20Condensed|Source%20Sans%20Pro" />

This Works

 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato"  />

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto%20Condensed" />

When i add | to add multiple fonts it generates error so should i use multiple <link> tag to add fonts or ?

Confused about this is as below links is generate by on Google fonts font use on website

https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans|Roboto:400,700,400italic|Roboto+Condensed:400,300|Lato

Upvotes: 1

Views: 990

Answers (3)

unor
unor

Reputation: 96587

The character | is not allowed in the query component (nor anywhere else in a URI). It would have to be percent-encoded with %7C.

So

http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Merriweather:400italic|Roboto+Condensed|Source+Sans+Pro|Droid+Serif|Open+Sans+Condensed|Oswald|Molengo|PT+Sans|Droid+Sans')

should be this URI instead

http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic%7CMontserrat:700%7CMerriweather:400italic%7CRoboto+Condensed%7CSource+Sans+Pro%7CDroid+Serif%7COpen+Sans+Condensed%7COswald%7CMolengo%7CPT+Sans%7CDroid+Sans')

Upvotes: 3

Pralhad Narsinh Sonar
Pralhad Narsinh Sonar

Reputation: 1454

Your example code working with JAVASCRIPT NOTATION LINK and IMPORT may not help to eliminate the VALIDATION error - so please try with JAVASCRIPT notation it works well without any error.

<!DOCTYPE html>
<html>
<head>

    <title>Title</title>
    <meta charset="utf-8" />
<script type="text/javascript">
WebFontConfig = {google: { families: [ Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Merriweather:400italic|Roboto+Condensed|Source+Sans+Pro|Droid+Serif|Open+Sans+Condensed|Oswald|Molengo|PT+Sans|Droid+Sans ] }};
(function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
</script>
</head>
<body>
</body>
</html>

You will need to substiture & sign with &amp;

<!DOCTYPE html>
<html>
<head>

    <title>Title</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans&amp;subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
</head>
<body>
</body>
</html>

You may please use JAVASCRIPT notation for including the fonts from google

<!DOCTYPE html>
<html>
<head>

    <title>Title</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Open+Sans::cyrillic-ext,latin,greek-ext,greek,vietnamese,latin-ext,cyrillic' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>
</head>
<body>
</body>
</html>

Few more suggestions

  1. Always include doctype at the top of HTML page
  2. Try the IMPORT and JAVASCRIPT alternatives to include the fonts.
  3. Please use your own google font - to avoid typos I tried with new fonts from google.

Upvotes: 5

HelloWorld
HelloWorld

Reputation: 2330

There is a space in the string near the end

PT Sans|Droid Sans')"

should be escaped as:

PT%20Sans|Droid%20Sans')"

Upvotes: 1

Related Questions