Codecademy Forums

FAQ: CSS Typography - Fallback Fonts

This community-built FAQ covers the “Fallback Fonts” exercise from the lesson “CSS Typography”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn CSS

FAQs on the exercise Fallback Fonts

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

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

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

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

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

In CSS typography, fallback fonts, in the example there are quotes around the fonts that are not required when you go to actually run the exercise? Why?

How likely is it for a user to not have the specified font in his computer? I mean, is it actually common to specify a fallback font for every section of a stylesheet? I would assume is not common

We don’t see Geneva, nor Helvetica in there. Writing only for Apple would be irresponsible for webfacing resources. Sure it’s okay as the preferred font, but anything is better than letting the user agent decide. That is the last fallback, the generic family.

Knowing that the browser is capable of going through a list of fonts and binding to a local representation if one exists, else keep trying is something we can leverage.

We start with the most preferred font that the design was intended to use, then allow for a second font that still suits the design. Failing either of the above, a font that won’t break the design but that is more generic, and failing that a generic family.

I totally agree on idea of Fallback Fonts we all use different OS,
but why can’t we have the link for the forts inside of HTML with “https://fonts.google.com/
or this google fonts is kinda new feature?

could you please explain the difference, between small a letter font and those who doesn’t have small a on the icon ? thanks

Not sure I understand your question. Can you give us an example?

(I got the answers, in next lesson)


you see, some of them have highlighted a letter, what’s the difference?

It’s been so long since I did anything under the hood this is completely forgotten, for the most part. It may have to do whether it is a TrueType font, or some other type.

See also (though only slightly related)

https://en.wikipedia.org/wiki/Type_foundry

The stacking effect might indicate more than one font style, such as bold, italic, script, etc.

There looks to be three main symbols, so worth digging further into. If you can view the file extensions in the Windows/fonts folder, look for .ttf to identify TrueType.

Ten years ago I would have been able to identify more, but without a full scale review, not so today.

2 Likes

The instructions say to create a selector “.garamond .sample .text”. As there’s only specific classes like “regular text”, “bold text” and “italic text” (and not “text”), why does “.text” work?

Because it is a class selector, not a font.


To clarify…

Garamond” is a font found on most systems, out of the box.

bold is a font-weight property value.

italic is a font-style property value.

Terms like regular and text are more descriptive. Mind, there are a gazillion properties in the text-____ property list.. When we write them as class selectors the term is arbitrarily chosen for its description.

If our HTML has, for instance, sections with class attributes, regular, special, aside, &c. we chose those names to give our markup some self-documentation that helps tremendously when scanning a style sheet. It also helps us to preserve structure in our realization of the design and layout.

Not only are we assigning typography information, we give those elements dimensions and position. They may have background differences (images, colors), borders, forms, &c. Keeping things organized on the screen means setting the rules in the style sheet.

1 Like

Thank you for your explanation!

1 Like

In the example, why is Garmond and Times in quotes but not serif? I thought you only needed the quotes if the font was more than one word?
h1 { font-family: "Garamond", "Times", serif; }

Also, is the capitalization of the font important?

And you would be correct. The quotes are not needed, but they are not hurting anything, either, as they have no effect.

If we are certain that the parsing engine is not case-sensitive, then no, otherwise use the proper name. In grammar that means capitalized.

1 Like