HTML validation produces mistakes

Question

HTML validation produces mistakes

I encountered an issue when using Google Fonts and received the following error related to a specific 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" />
The syntax of the URL should adhere to specific guidelines. For example: /hello, #canvas, or . Characters must be represented in NFC form 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 particular set up results in an error:

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

However, the following configurations work successfully:

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

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

Should I use multiple <link> tags to add fonts separately due to the error generated by adding | to include multiple fonts?

I am puzzled about this situation as the below links are generated by Google Fonts font selection for website usage:

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

html css fonts w3c-validation

Answer 1

Answer №1

Take advantage of JAVASCRIPT NOTATION in your code Using LINK and IMPORT may not resolve the VALIDATION issue - consider using JAVASCRIPT notation as it can work without any errors.

<!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>

Make sure to replace & with &

<!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>

Consider utilizing JAVASCRIPT notation when including 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>

Additional recommendations

Always include doctype declaration at the beginning of HTML document
Explore alternatives like IMPORT and JAVASCRIPT for font inclusion
Consider using a new set of google fonts to avoid typographical errors

Answer 2

Take advantage of JAVASCRIPT NOTATION in your code Using LINK and IMPORT may not resolve the VALIDATION issue - consider using JAVASCRIPT notation as it can work without any errors.

<!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>

Make sure to replace & with &

<!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>

Consider utilizing JAVASCRIPT notation when including 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>

Additional recommendations

Always include doctype declaration at the beginning of HTML document
Explore alternatives like IMPORT and JAVASCRIPT for font inclusion
Consider using a new set of google fonts to avoid typographical errors

Answer 3

Answer №2

The symbol | should be avoided in the query component (as well as anywhere else in a URI). To use it, you would need to encode it with %7C.

This means that:

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 actually be written as:

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')

Answer 4

The symbol | should be avoided in the query component (as well as anywhere else in a URI). To use it, you would need to encode it with %7C.

This means that:

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 actually be written as:

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')

Answer 5

Answer №3

At the end of the string, there is a gap.

PT Sans|Droid Sans')

To correct this issue, it should be escaped like so:

PT%20Sans|Droid%20Sans')

Answer 6

At the end of the string, there is a gap.

PT Sans|Droid Sans')

To correct this issue, it should be escaped like so:

PT%20Sans|Droid%20Sans')

HTML validation produces mistakes

Answer №1

Answer №2

Answer №3

Similar questions

Tips for adjusting the color of multiple classes that have a common class using a toggle feature

What is the reason for index always being not equal to 0?

How can I eliminate a class when the scrollTop() position matches a specific div element?

The CSS dropdown navigation bar designed for mobile devices functions properly, however, it is not visible on iPhones

"Trouble with getting the Twitter Bootstrap dropdown menu to function properly

Incorporate a local asciinema file into an HTML document

Delivering static HTML content on Google App Engine using Python

When resizing the browser window, this single horizontal page website does not re-center

Occasionally, the letters in Google Fonts get jumbled up when refreshing the page, but

Google Chrome users may experience unexpected position changes in jQueryUI modal dialog when dragging

Linking children to their parents in a mat tree structure

Experiencing strange behavior with floating labels in Bootstrap 5.3 on my Google Chrome browser (Version 123.0.6312.86 (Official Build) (64-bit))

Prevent users from clicking by using a CSS class in HTML and JavaScript

Creating personalized fonts in SAPUI5 Theme Designer

Trigger .gif on hover using ng-repeat in AngularJS

Is there a way to dynamically access BEM-style selectors using CSS modules?

Chosen option from the Bootstrap drop-down menu

Embed one module within another module and utilize the controller from the embedded module

What if there was a magical jQuery method that could automatically trigger a callback function? What could it possibly be named?

Animating skill bars as you scroll down the page