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.