Google Fonts integration in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a Google Font in Figma.

Figma

font-family: '[1]', sans-serif;

Drag options to blanks, or click blank then click option'

ARoboto

BArial

CCourier New

DTimes New Roman

Attempts:

3 left

💡 Hint

Common Mistakes

Using system fonts like Arial instead of Google Fonts.

Misspelling the font name.

The correct font-family name to import from Google Fonts is Roboto.

2fill in blank

medium

Complete the code to apply the Google Font weight 700 (bold) in Figma.

Figma

font-weight: [1];

Drag options to blanks, or click blank then click option'

A400

B300

C700

D900

Attempts:

3 left

💡 Hint

Common Mistakes

Using 400 which is normal weight.

Using 900 which is extra bold.

The font-weight 700 corresponds to bold in Google Fonts.

3fill in blank

hard

Fix the error in the Google Fonts URL to import the font correctly.

Figma

@import url('https://fonts.googleapis.com/css2?family=[1]&display=swap');

Drag options to blanks, or click blank then click option'

ARoboto_wght@400;700

BRoboto:weight@400;700

CRoboto-weight@400;700

DRoboto:wght@400;700

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'weight@' instead of 'wght@'.

Using underscores or hyphens incorrectly.

The correct syntax for Google Fonts URL uses wght@ to specify weights.

4fill in blank

hard

Fill both blanks to set font style and fallback fonts correctly.

Figma

font-family: '[1]', [2], sans-serif;

Drag options to blanks, or click blank then click option'

ARoboto

BHelvetica

C'Arial Black'

D'Times New Roman'

Attempts:

3 left

💡 Hint

Common Mistakes

Using serif fonts as fallback for sans-serif fonts.

Not quoting font names with spaces.

Use Roboto as the Google Font and Helvetica as a common fallback font.

5fill in blank

hard

Fill all three blanks to create a CSS rule that imports, sets font family, and font weight.

Figma

@import url('https://fonts.googleapis.com/css2?family=[1]&display=swap');

body {
  font-family: '[2]', sans-serif;
  font-weight: [3];
}

Drag options to blanks, or click blank then click option'

ARoboto:wght@400;700

BRoboto

C700

DOpen Sans

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching font names between import and font-family.

Using incorrect font-weight values.

The import URL must specify the font and weights, the font-family uses the font name, and font-weight sets the weight.

Practice

1. What is the main benefit of integrating Google Fonts in Figma for Business Intelligence reports?

easy

A. Improves style and readability of reports

B. Automatically generates data insights

C. Connects to live data sources

D. Creates interactive dashboards

Solution

1. Step 1: Understand Google Fonts purpose in Figma

   Google Fonts integration allows you to use a wide variety of fonts to style your designs.

2. Step 2: Connect font use to BI report quality

   Using consistent and readable fonts improves the style and readability of BI reports, making data easier to understand.

3. Final Answer:

   Improves style and readability of reports -> Option A

4. Quick Check:

   Google Fonts improve report readability [OK]

Hint: Google Fonts enhance text style and clarity [OK]

Common Mistakes:

• Confusing font integration with data connection
• Thinking fonts generate insights
• Assuming fonts create dashboards

2. Which of the following is the correct way to select a Google Font in Figma?

easy

A. Use the Text tool and press Ctrl+G

B. Upload the font file manually to Figma

C. Connect to Google Fonts via a plugin only

D. Type the font name in the font dropdown and select it

Solution

1. Step 1: Identify how Google Fonts appear in Figma

   Google Fonts are integrated and appear in the font dropdown menu for easy selection.

2. Step 2: Confirm the correct selection method

   You simply type or scroll to the font name in the dropdown and select it; no manual upload or plugin is required.

3. Final Answer:

   Type the font name in the font dropdown and select it -> Option D

4. Quick Check:

   Font dropdown selection [OK]

Hint: Use font dropdown to pick Google Fonts directly [OK]

Common Mistakes:

• Thinking you must upload fonts manually
• Confusing shortcut keys with font selection
• Assuming plugins are required for Google Fonts

3. Consider this Figma text style setup: You select 'Roboto' from Google Fonts and set font size to 16. What will be the visual result on your BI report text?

medium

A. Text appears with Roboto font, size 16, improving readability

B. Text defaults to system font because Google Fonts are not supported

C. Text size changes but font remains default

D. Text becomes bold automatically

Solution

1. Step 1: Analyze font selection effect

   Selecting 'Roboto' from Google Fonts applies that font style to the text in Figma.

2. Step 2: Analyze font size effect

   Setting font size to 16 changes the text size accordingly, making it readable and consistent.

3. Final Answer:

   Text appears with Roboto font, size 16, improving readability -> Option A

4. Quick Check:

   Selected font and size apply correctly [OK]

Hint: Selected font and size show exactly on text [OK]

Common Mistakes:

• Assuming Google Fonts are unsupported in Figma
• Thinking font size changes without font change
• Believing text becomes bold automatically

4. You tried to apply a Google Font in Figma but the text still shows the default font. What is the most likely cause?

medium

A. The font size was set to zero

B. Google Fonts are not supported in Figma

C. You typed the font name incorrectly in the dropdown

D. You forgot to restart Figma after selecting the font

Solution

1. Step 1: Check font selection process

   If the font name is typed incorrectly, Figma cannot apply the intended Google Font and defaults to system font.

2. Step 2: Verify other causes

   Google Fonts are supported without restart; font size zero would hide text but not cause default font.

3. Final Answer:

   You typed the font name incorrectly in the dropdown -> Option C

4. Quick Check:

   Incorrect font name causes default font [OK]

Hint: Check spelling of font name in dropdown [OK]

Common Mistakes:

• Believing Google Fonts need restart
• Assuming Google Fonts unsupported
• Ignoring font size effects

5. You want to create a BI report in Figma with consistent font style using Google Fonts. Which approach best ensures consistency across multiple pages?

hard

A. Manually select the Google Font for each text box on every page

B. Create a text style with the chosen Google Font and apply it to all text elements

C. Use different Google Fonts on each page for variety

D. Export text as images to preserve font style

Solution

1. Step 1: Understand text style usage in Figma

   Creating a text style with a Google Font allows you to reuse the same font settings easily across multiple pages.

2. Step 2: Compare manual selection vs styles

   Manually selecting fonts on each text box risks inconsistency; using styles ensures uniformity and easier updates.

3. Final Answer:

   Create a text style with the chosen Google Font and apply it to all text elements -> Option B

4. Quick Check:

   Text styles ensure consistent font use [OK]

Hint: Use text styles for consistent fonts across pages [OK]

Common Mistakes:

• Manually setting fonts everywhere causing inconsistency
• Using multiple fonts reduces report clarity
• Exporting text as images loses editability