Bird
Raised Fist0
CSSmarkup~5 mins

Font family in CSS - Cheat Sheet & Quick Revision

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Recall & Review
beginner
What is the purpose of the font-family property in CSS?
The font-family property sets the typeface for text on a webpage, controlling how the text looks by choosing a font or a list of fonts.
Click to reveal answer
beginner
How do you specify multiple fonts in font-family and why?
You list fonts separated by commas, like font-family: Arial, Helvetica, sans-serif;. This provides fallback fonts if the first is not available on the user's device.
Click to reveal answer
beginner
What is a generic font family in CSS?
A generic font family is a broad category like serif, sans-serif, monospace, which tells the browser to use any font of that style if specific fonts are unavailable.
Click to reveal answer
beginner
Why should font names with spaces be in quotes in font-family?
Font names with spaces (like "Times New Roman") must be in quotes so the browser reads the whole name as one font instead of separate words.
Click to reveal answer
beginner
What happens if none of the fonts in font-family are available?
The browser uses the default font of the system or the generic font family specified last in the list to display the text.
Click to reveal answer
Which CSS property controls the typeface of text?
Atext-align
Bfont-size
Cfont-family
Dfont-weight
How do you write multiple fonts in font-family?
ASeparate fonts with spaces
BSeparate fonts with commas
CUse semicolons between fonts
DWrite fonts inside parentheses
Which is a generic font family in CSS?
Aserif
BTimes New Roman
CArial
DCourier New
How should you write a font name with spaces in font-family?
AWith single or double quotes
BWithout quotes
CWith parentheses
DWith curly braces
What does the browser do if no specified fonts are available?
AShows an error
BLeaves text invisible
CUses the first font anyway
DUses the system default or generic font
Explain how to use the font-family property to ensure text displays well on different devices.
Think about listing fonts and why quotes matter.
You got /4 concepts.
    Describe what a generic font family is and give examples.
    Generic fonts help browsers pick a similar style if specific fonts are missing.
    You got /3 concepts.

      Practice

      (1/5)
      1. What does the CSS font-family property control on a webpage?
      easy
      A. The style and type of text fonts displayed
      B. The size of the text
      C. The color of the text
      D. The spacing between letters

      Solution

      1. Step 1: Understand the role of font-family

        The font-family property sets which font or fonts the browser uses to display text.

      2. Step 2: Differentiate from other text properties

        Size, color, and spacing are controlled by other CSS properties like font-size, color, and letter-spacing.

      3. Final Answer:

        The style and type of text fonts displayed -> Option A

      4. Quick Check:

        font-family controls font style = C [OK]
      Hint: Remember: font-family picks fonts, not size or color [OK]
      Common Mistakes:
      • Confusing font-family with font-size
      • Thinking font-family changes text color
      • Mixing font-family with letter spacing
      2. Which of the following is the correct syntax to set a font family with a font name containing spaces?
      easy
      A. font-family: ArialBlack, sans-serif;
      B. font-family: Arial Black, sans-serif;
      C. font-family: Arial Black sans-serif;
      D. font-family: 'Arial Black', sans-serif;

      Solution

      1. Step 1: Recognize font names with spaces need quotes

        Font names with spaces like "Arial Black" must be wrapped in quotes to be read correctly.

      2. Step 2: Check syntax correctness

        font-family: 'Arial Black', sans-serif; uses quotes and separates fonts with commas, which is correct syntax.

      3. Final Answer:

        font-family: 'Arial Black', sans-serif; -> Option D

      4. Quick Check:

        Quotes needed for multi-word fonts = A [OK]
      Hint: Use quotes around font names with spaces [OK]
      Common Mistakes:
      • Omitting quotes for multi-word font names
      • Missing commas between font names
      • Combining font names without spaces or commas
      3. Given the CSS rule:
      p { font-family: 'Times New Roman', Georgia, serif; }

      What font will the browser use if 'Times New Roman' is not available but Georgia is?
      medium
      A. Times New Roman
      B. Georgia
      C. serif
      D. Arial

      Solution

      1. Step 1: Understand font-family fallback order

        The browser tries fonts in order: first 'Times New Roman', then Georgia, then generic serif.

      2. Step 2: Apply fallback logic

        If 'Times New Roman' is missing, the browser uses the next available font, which is Georgia.

      3. Final Answer:

        Georgia -> Option B

      4. Quick Check:

        Fallback font used if first missing = B [OK]
      Hint: Browser picks first available font in list [OK]
      Common Mistakes:
      • Assuming browser uses generic serif first
      • Ignoring font order in the list
      • Thinking browser picks random font
      4. Identify the error in this CSS rule:
      h1 { font-family: Arial, 'Helvetica Neue' sans-serif; }
      medium
      A. Missing comma between 'Helvetica Neue' and sans-serif
      B. Quotes around 'Helvetica Neue' are incorrect
      C. Arial should be in quotes
      D. Font-family property cannot have more than two fonts

      Solution

      1. Step 1: Check font list syntax

        Font names must be separated by commas. Here, there's no comma between 'Helvetica Neue' and sans-serif.

      2. Step 2: Confirm quotes and other syntax

        Quotes around 'Helvetica Neue' are correct; Arial does not need quotes; multiple fonts are allowed.

      3. Final Answer:

        Missing comma between 'Helvetica Neue' and sans-serif -> Option A

      4. Quick Check:

        Font names must be comma-separated = A [OK]
      Hint: Always separate font names with commas [OK]
      Common Mistakes:
      • Forgetting commas between font names
      • Misusing quotes around single-word fonts
      • Thinking font-family limits number of fonts
      5. You want to ensure your webpage text uses the font 'Open Sans' if available, otherwise falls back to Arial, then any sans-serif font. Which CSS rule correctly achieves this?
      hard
      A. font-family: Open Sans, Arial, sans-serif;
      B. font-family: 'Open Sans', 'Arial', serif;
      C. font-family: 'Open Sans', Arial, sans-serif;
      D. font-family: 'Open Sans' Arial sans-serif;

      Solution

      1. Step 1: Use quotes for multi-word font names

        'Open Sans' has a space, so it must be in quotes.

      2. Step 2: Separate fonts with commas and use generic family without quotes

        Fonts must be comma-separated. Arial is a single word and does not need quotes. The generic family sans-serif should not be quoted.

      3. Final Answer:

        font-family: 'Open Sans', Arial, sans-serif; -> Option C

      4. Quick Check:

        Quotes for multi-word + commas + generic unquoted = D [OK]
      Hint: Quote multi-word fonts, separate with commas, generic unquoted [OK]
      Common Mistakes:
      • Not quoting multi-word font names
      • Missing commas between fonts
      • Quoting generic font families