Weird... Spaces in URL Worked Fine

Tell us what’s happening:
tl;dr -> I’ve learned that spaces aren’t permitted in URLs. However, I had a single space in the URL for the href value in a tag that works fine, what is happening?

I tried to experiment with Google Fonts with a font named Amatic SC, and since it has space in it, I tried to surround the font name in the URL in the tag with single quotes, like this:
<link href="https://fonts.googleapis.com/css?family='Amatic SC'" rel="stylesheet" type="text/css">
But it did not works on the cat page, then I found an article explaining that URLs can’t have spaces in them, so they’re often replaced by the character(s) + or %20 and it does the trick.
Then, I changed it back to a single space "without quotation marks) and the font was applied to the text properly and now I’m confused. I thought spaces are not allowed in URLs. Could anyone explain to me what is happening?

Your code so far


<link href="https://fonts.googleapis.com/css?family=Amatic SC" rel="stylesheet" type="text/css">
<style>
.red-text {
  color: red;
}
h2 {
  font-family:Amatic SC;
}
p {
  font-size: 16px;
  font-family: monospace;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

<div>
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
</div>

<form action="https://freecatphotoapp.com/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label><br>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.183 Safari/537.36.

Challenge: Import a Google Font

Link to the challenge:

Hey @adina-t!

I am also a beginner but I found this great article on stackoverflow discussing this exact same problem. It basically says that urls should not have spaces because spaces are considered to be unsafe. So if you had a space in your url it would technically works but it is not considered safe.

Excerpt from stackoverflow article:
The space character is unsafe because significant spaces may disappear and insignificant spaces may be introduced when URLs are transcribed or typeset or subjected to the treatment of word-processing programs.

Here is the complete stackoverflow question

Hope that helps!

For this specific challenge, you will need to use the lobster font for the tests to pass.

1 Like

Domain names (the part before the first forward slash) can only have letters, numbers, and hyphens, so you can never have a space in that part of the URL.

The space in your URL is after the forward slash however, which can have spaces. What is going on behind the scenes is that your browser is automatically converting the space to a special escape character (%20) and then the server will convert it back to a space when it receives the request. Well, the same thing happens for those single quotes as well. So when you add them the server sees that family is set to literally ‘Amatic SC’ (single quotes are included) but it was expecting only Amatic SC (without single quotes). Since the server doesn’t know how to handle the version with the single quotes it returns an error.

1 Like