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

Troubleshooting Problem in Coursera's AngularJS Week 3 Exercise 4

Converted my Flask code into a specialized software package, encountering a perplexing TemplotNotFound error

What is the best way to align these boxes so they fit perfectly together?

When using ReactJS, hovering over a row in a table should trigger a change in the background color of the corresponding row in another table with the same index

How to emphasize a clicked hyperlink in AngularJS

What is the best way to make a dropdown button on a top navigation bar show as active using Semantic-ui?

Prevent the cursor from exiting the div element when the tab key is pressed

Achieving text alignment with icons in Angular

Pictures do not adhere to the maximum width set on their parent elements

Ensure that the dropdown menu remains visible even after the mouse no longer hovers over it

What could be causing this hydration error in NextJS in the development server build but not in the production build?

Maintain the border styling of a radio button when it is in the selected state

Strategies for positioning a fixed div at the bottom of another div

Add Text to Bootstrap Modal Window

What could be causing the Google Chrome inspector to insert strange ID attributes into various HTML elements?

How can screen readers be alerted about freshly loaded content through ajax?

Using JQuery to switch out images that do not have an ID or class assigned

Element with absolute positioning inside a relative parent does not interfere with other elements outside of the parent

Implement Icon using CSS Class in jQuery Mobile

Wrapping an <h1> tag inside an <a> link can create unwanted empty space on a web page