In Google Fonts documentation, it suggests that loading multiple Google Fonts can be done via pipe character (|), for example:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700|Amaranth:400italic" />
With HTML validator, it said:
Bad value http://fonts.googleapis.com/css?family=PT+Sans:400,700|Amaranth:400italic for attribute href on element link: Illegal character in query: | is not allowed.
Which website should I trust? Of course I can separate two fonts in two requests as follow, but the load time will be doubled.
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Amaranth:400italic" />
p.s. the DOCTYPE is HTML5.
As @BoltClock suggests, escaping the pipe character to %7C is the best choice.
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700%7CAmaranth:400italic" />
Both fonts loaded correctly, and verified by the network response of the above link.