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 () 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 () below!
Agree with a comment or answer? Like () to up-vote the contribution!
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?
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.
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.
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?
“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.
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?
In index.html there are no elements that have been assigned a class name of “text”, so what exactly is the selector .garamond .sample .text targeting for styling? …and how is it doing without that class having been defined/assigned in the html?
I’m still struggling with this concept. Is there anything on the web that could explain this with a different example? I was under the impression the CSS class selector has to exactly match the class text string defined in the linked html page.
) below.
) to up-vote the contribution!
