FAQ: Learn CSS Selectors Visual Rules - CSS Visual Rules - Font Family I

This community-built FAQ covers the “Font Family” exercise in Codecademy’s CSS lessons.

FAQs on the CSS exercise Font Family

Join the Discussion. We Want to Hear From You!

Have a new question or can answer someone else’s? Reply (reply) to an existing thread!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources about CSS in general? Go here!

Want to take the conversation in a totally different direction? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account, billing, Pro, or Pro Intensive? Reach out to our support team!

None of the above? Find out where to ask other questions here!

Other FAQs

The following are links to additional questions that our community has asked about this exercise:

  • This list will contain other frequently asked questions that aren’t quite as popular as the ones above.
  • Currently there have not been enough questions asked and answered about this exercise to populate this FAQ section.
  • This FAQ is built and maintained by you, the Codecademy community – help yourself and other learners like you by contributing!

Not seeing your question? It may still have been asked before – try searching for it by clicking the spyglass icon (search) in the top-right of this page. Still can’t find it? Ask it below by hitting the reply button below this post (reply).

This post, from a different thread, relates to the topic of this exercise.

In it, I’ve asked a few questions about the differences between, and use in CSS of:

  • fonts
  • font families
  • web-safe fonts
  • (web-safe) font stacks
  • generic fonts

It’s all been sending me a bit :crazy_face: !!
So any enlightenment would be greatly appreciated! :smiley:

I’ve now come to some conclusions about the queries I had (linked to in the above post). If you’re interested, please find them here, and please confirm, clarify, amplify or correct as you see fit :grinning:

1 Like

For the fun of it, go to the control panel in Windows, or whatever panel if not and look for Fonts. Open that folder. Are there any names in the list that are not capitalized?

We can hope and trust that the browser will support our guffaw of not capitalizing, but should we put that on the browser? Those names are capitalized for good reason. They are a class of object. Class names are capitalized. But that goes beyond the realm of just CSS. If you find you have a case-sensitive user agent then be glad of that. You’re less likely to form bad habits writing in that environment.

Speaking of good practice,
single quote and double quotes which one should i use?

font-family: 'Courier New';
font-family: "Courier New";
or in HTML:
<h1 class='test' > vs <h1 class="test">
i know they both will work well in all browsers but is there a real difference between them ?

1 Like

It won’t matter which we use, but consistency is a good thing. For my own part, I always use double quotes on HTML attributes whether hard coding or dynamically generating it.

p = '<p class="topic">Lorem ipsum dolar&hellip;</p>'

That is a JS example of a generated element, what I call an HTML string.

In CSS I tend to use single quotes on everything. More by habit than anything else.


When I did this exercise I initially created a new rule set h1, h2 {font-family: Georgia}, which was accepted as correct, but I wondered if it would also be ok to add new font-family declarations to the existing h1 and h2 rule sets, so I tried that, and it was also ok. Writing one line of code seems quicker, but I’m guessing it would be better to limit the amount of rule sets as much as possible? (As in my second answer.)

1 Like

When doing this exercise, the example has

h1 {  
  font-family: "Courier New";

But when I added

font-family: "Georgia";

per the instructions, it claimed that I didn’t change the font family of the heading/subheading to Georgia?

It only worked when I removed the " marks.

Is this actually best practice to not use " when using the font-family keyword or is this a bug?

The font-family property value need not be written in quotes when the name contains no white space. Georgia may be written without quotes, and it is probably best to leave it Au Naturel. As for "Courier New", it contains white space, therefore must be in quotes.

1 Like

So why do we put the same font in both h1 and h2, and not make a class for the font as the same is used?
I assume that in this particular project, it’s done like this because they want to be able to keep both seperate as they might get different fonts in the future.
But isn’t it also an option to add the font class to both? (As learned in the previous lesson)

I don’t have Helvetica installed on my Windows PC, but it displayed correctly on the exercise. How come??

General question here! Is the best practice, when adjusting both h1 and h2 elements in the code for the practice question, to create a new h1, h2 {} or just add onto the h1 and h2 separately?

h2 {
font-family: Georgia;

h1 {
color: #FFF;
font-size: 2em;
padding-top: 100px;
width: 100%;

h2 {
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
color: rgba(255, 255, 255, 0.5);
font-weight: 100;
font-size: 22px;
line-height: 24px;
padding-bottom: 30px;
text-align: left;
width: 70%;