Skip to content

Files

Latest commit

Dec 6, 2023
6d6d537 · Dec 6, 2023

History

History
33 lines (20 loc) · 2.66 KB

File metadata and controls

33 lines (20 loc) · 2.66 KB

2. Stop Escaping &

…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&amp;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 &amp; 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 &amp; need to be escaped? In two cases:

  1. 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  , for that would yield a space almost indistinguishable from a regular space ( ), but &amp;nbsp;. Here you would escape the ampersand.

  2. 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.