Basic CSS–Challenge: Import a Google Font, fonts actually not case sensitive?

HTML-CSS
1

In this challenge it is explained that: „Family names are case-sensitive and need to be wrapped in quotes if there is a space in the name. For example, you need quotes to use the "Open Sans" font, but not to use the Lobster font.“

As I’m kind of a rebel, I had to disobey these instructions first to see what would happen. I tried some fonts like "Noto Sans", "Libre Sans" and the afore mentioned "Open Sans" and noticed, that the input didn’t seem to be case–sensitive or need to be wrapped in quotation marks at all. For example:

h2  {
  font-family: "Open Sans";
}

This is applying the font correctly, but so is Open Sans (without quotation marks) and open sans (without quotation marks and also lower case). Also the in this challenge used Lobster font (as used in the code below) isn’t case-sensitive in my experience.

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
h2 {
  font-family: lobster;
}

.red-text {
  color: red;
}

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>

So, is this some sort of ‚best practice‘–advice, or am I missing something? Maybe my experiences aren’t true for every browser or version of html?

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36 OPR/79.0.4143.50

Challenge: Import a Google Font

Link to the challenge:

2

as per the MDN documentation on font-family:

Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means that punctuation characters and digits at the start of each token must be escaped in unquoted font family names.

This means font family names in all letters would technically be valid. However given the complications from punctuations/digits potentially being in a font-family name, and for consistency:

It is a good practice to quote font family names that contain white space, digits, or punctuation characters other than hyphens.

as for case sensitivity, I actually don’t believe font-family requires case-sensitive input. A quick search in the documentation also turned up nothing.

Now this is all from a modern browser standpoint. It is perfectly likely that with older CSS versions, or old browsers like IE, you need to be case-sensitive and double quote.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.