…unless you want to make a character reference visible. Now:
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&lang=en">
As with our first case, this example is interesting, too, for there’s more to note. A language (lang=en
) may not need to be set for a font, one might add back the protocol to force a connection on https
, one can omit the quotes around stylesheet
; and, for Google providing the fonts, they could offer a less convenient (for them) but stronger solution (for others) when it comes to privacy by making it easier to self-host the fonts, so that fonts.googleapis.com cannot collect any traffic information.
Our focus is on the &
though, used to escape the ampersand in the URL. Yet &
, in essence, rarely has to be escaped anymore. You can pretty much stop worrying about &
.
When does &
need to be escaped? In two cases:
-
To show a character reference (the popular use case). That is, if in the copy of an HTML document you talk about, say, using no-break spaces, you would not type in
&nbsp;
. Here you would escape the ampersand. -
Another case is to avoid what the HTML specification calls “ambiguous ampersands.” These are, in other words, character sequences of an ampersand, some alphanumeric characters, and a semicolon that could be confused with a sequence that maps to a particular character.
Since it’s rare to run into the second scenario, the only situation to watch out for is when one writes about character references. This happens to be a scenario that takes care of itself, for you wouldn’t have a chance to make a character reference visible if you didn’t escape the leading ampersand.
How can the sample code also work? The suspected non-use for lang=en
makes us drop the ampersand altogether:
<link rel=stylesheet href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700">
Yet if lang
was needed:
<link rel=stylesheet href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&lang=en">
I> In May, 2019, Google added support for font-display: swap
to Google Fonts. That was great news, and if you’re using the service you may benefit from enabling this option. Jeremy Wagner has a nice write-up on font-display
that explains why swap
is a smart setting.