1

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
Improve this question

3 Answers 3

Reset to default
5

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.
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

How will you add multiple fonts?
I have updated the answer - please check first section of the answer. With javascript notation it doesn't give any error.
@Learning There is no need for any of that. All it does is give you what you want in a different fashion, with javascript, rather than fix what you have. And what happens should the js fail in some way? Don't do this.
3

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')
Improve this answer

Comments

1

There is a space in the string near the end

PT Sans|Droid Sans')"

should be escaped as:

PT%20Sans|Droid%20Sans')"
Improve this answer

2 Comments

Changing it to ` <link rel="stylesheet" href="fonts.googleapis.com/…)" />` generates same error
Can you add the new error as a screenshot next to the first one?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.