How to Italicize in Figma: Typography Made Easy

You’ve selected the perfect font. The layout looks clean. Then you try to add emphasis to a word and realize the italic option isn’t there.

Frustrating, right?

Learning how to italicize in Figma takes about 30 seconds once you know where to look. But Figma handles text formatting differently than Word or Google Docs.

The italic keyboard shortcut only works when your font family includes italic variants. Some fonts don’t.

This guide covers three methods to apply italic text styling: the Typography panel, keyboard shortcuts, and workarounds for fonts without italic support.

You’ll also learn how to create reusable italic text styles and fix common issues when italic formatting won’t apply.

How to Italicize in Figma

How to italicize in Figma is the process of applying slanted text formatting to selected text layers using the Typography panel, keyboard shortcuts, or font style dropdown.

Users need this when adding emphasis to words, creating visual hierarchy in UI designs, or styling body copy for readability.

This guide covers 3 primary methods requiring 30 seconds each and a Figma account on any plan.

Prerequisites

Before you start formatting text, make sure you have these ready:

• Figma account (Free, Professional, Organization, or Enterprise plan)
• Browser (Chrome, Firefox, Safari, Edge) or Figma Desktop App
• Selected font with italic variant available in font family
• Basic familiarity with the text tool and layer selection

Took me a while to figure out that not every Google Font includes italic styles. Check before you commit to a typeface.

Step 1: How Do You Select Text in Figma?

Click on an existing text layer or press T to create a new text box on the design canvas.

Double-click to enter edit mode, then drag to highlight specific characters.

A blue bounding box appears around selected text, confirming your selection is active.

Action

• Canvas: Click text layer or press T for new text box
• Selection: Double-click layer, drag to highlight specific text
• Result: Blue highlight appears over selected characters

Text must be selected before any text formatting options become available in the right sidebar panel.

Step 2: Where Do You Find the Typography Panel?

The right sidebar contains the Typography section, visible automatically when a text layer is selected.

This panel shows your current font family, font weight dropdown, and size controls.

Action

• Location: Right sidebar → Typography section (appears with text selection)
• Font dropdown: Located directly below layer name
• Result: Full typography controls become accessible

The Typography panel houses all character styling options including italic variants, font weights, and text decoration.

If you’re working on a wireframe or mockup, this is where you’ll spend most of your time adjusting type properties.

Step 3: How Do You Apply Italic Style from the Font Dropdown?

Click the font weight dropdown in the Typography panel.

Scroll to find the italic variant, listed as “Italic” or a combination like “Regular Italic” or “Bold Italic.”

Click to apply the style to your selected text.

Action

• Typography section: Click font weight dropdown (shows current weight like “Regular”)
• Dropdown list: Scroll to locate “Italic” or weight+italic combo
• Result: Selected text displays slanted italic glyphs

Selecting the italic variant from the dropdown applies true italic letterforms designed by the font creator.

This differs from faux italic, which just slants regular characters mechanically.

Fonts like Inter, Roboto, Open Sans, and Montserrat all include proper italic variants. Blinker and Jost don’t.

Step 4: What Keyboard Shortcut Applies Italic in Figma?

Press Cmd+I (Mac) or Ctrl+I (Windows) with text selected to toggle italic formatting on or off.

This keyboard command works only when the selected font includes an italic variant in its font family.

Action

• Select text: Highlight characters or click text layer
• Keyboard: Press Cmd+I (macOS) or Ctrl+I (Windows)
• Result: Text toggles to italic variant if available

The keyboard shortcut provides the fastest method for applying italic without navigating through menus.

Similar shortcuts exist for other formatting: Cmd+B for bold, Cmd+U for underline text in Figma.

Step 5: Why Does the Italic Option Not Appear for Some Fonts?

Figma requires actual italic font files within the font family.

Unlike Microsoft Word or PowerPoint, Figma doesn’t create faux italics through software slanting.

If the italic option is missing or greyed out, the font simply doesn’t include an italic variant in its design.

Action

• Check font family: View all available weights in the dropdown menu
• Missing italic: Font does not include italic variant files
• Verification: Visit Google Fonts or Adobe Fonts to confirm italic availability

When you add fonts to Figma, make sure to install both regular and italic variants if you need slanted text.

Some designers work around this by using skew plugins from the Figma Community, though the results aren’t true italic glyphs.

Variable fonts with a slant axis offer another alternative. These let you adjust the slant angle through the Variable tab in type settings.

Alternative Methods When Font Lacks Italic Variant

Some fonts don’t ship with italic styles. Here’s how to work around that limitation.

How Do You Create Faux Italic Using a Skew Plugin?

Install a skew plugin from the Figma Community, select your text layer, then apply a horizontal slant between 10-15 degrees to simulate italic appearance.

Action

• Figma Community: Search “Skew” plugin, click Install
• Select text layer: Click the layer (not individual characters)
• Plugin → Skew: Apply 12-degree horizontal slant
• Result: Text appears slanted without true italic font

Faux italic doesn’t use designed italic letterforms. May affect legibility in smaller sizes.

How Do You Switch to a Font with Italic Support?

Replace your current font with a similar typeface that includes italic variants.

Common options: Inter, Roboto, Open Sans, Noto Sans, Lato.

Action

• Typography panel: Click font family dropdown
• Search: Type font name with italic support
• Select: Apply new font family to text layer
• Result: Italic option becomes available in weight dropdown

How Do You Apply Italic to Part of a Text Layer?

Double-click the text layer to enter edit mode, drag to highlight specific words, then apply italic via Cmd+I or the font dropdown.

Action

• Text layer: Double-click to enter edit mode
• Highlight: Click and drag across specific text
• Apply: Press Cmd+I (Mac) or Ctrl+I (Windows)
• Result: Only highlighted portion displays italic

Partial italic styling creates emphasis without affecting the entire text block.

Works great for product names, book titles, or foreign words within body copy. Similar technique applies when you need to edit text in Figma for other formatting needs.

How Do You Create a Reusable Italic Text Style?

Define a text style with italic properties for consistent application across design files and team libraries.

Action

• Select text layer: Choose layer with desired italic formatting
• Typography section: Click four-dot style icon
• Click “+”: Create new style
• Name style: Use clear naming like “Body Italic” or “Caption Emphasis”
• Result: Italic text style saved to Local Styles

Text styles prevent manual formatting and maintain design system consistency across your team.

When you create a design system in Figma, include italic variants for each text level.

Verification

Confirm italic applied correctly with these checks:

• Typography panel: Font weight shows “Italic” or variant name containing “Italic”
• Visual inspection: Letters display slant with redesigned letterforms (true italic) versus mechanically slanted (faux)
• Dev Mode: CSS output shows font-style: italic

True italic glyphs have redesigned letterforms. The lowercase “a” and “f” typically look different from their upright versions.

Troubleshooting

Issue: Cmd+I / Ctrl+I Does Nothing

Solution: Selected font lacks italic variant. Switch to font family with italic support (Inter, Roboto, Open Sans) or use skew plugin for faux effect.

If you need to undo in Figma after applying wrong formatting, press Cmd+Z (Mac) or Ctrl+Z (Windows).

Issue: Text Randomly Converts to Italic

Solution:

1. Select affected text layer
2. Command/Ctrl + / (Quick Actions)
3. Type “Select all with same font”
4. Reassign correct font weight from dropdown

This bug sometimes occurs with Gotham and other commercial fonts. Installing identical font files across all team members often fixes it.

Issue: Italic Option Greyed Out

Solution: Font family doesn’t include italic files. Verify by checking Google Fonts or Adobe Fonts source.

If you’ve added Adobe Fonts to Figma, make sure you activated the italic weights in Creative Cloud.

Install italic variant locally if available separately from the regular weight.

Issue: Variable Font Italic Not Showing Slider

Solution: Figma treats the italic axis as on/off toggle (ital=0 or ital=1), not a slider.

Access through Variable tab in type settings panel, not the standard weight dropdown.

Some variable fonts use slant axis instead of italic axis. Check the Variable tab for available axes.

Related Processes

Continue building your Figma typography skills:

• How to curve text in Figma
• How to superscript in Figma
• How to type on a path in Figma
• How to make components in Figma
• How to use auto layout in Figma

For broader design context, learn about responsive typography and accessible typography principles.

FAQ on How To Italicize In Figma

What is the keyboard shortcut for italic in Figma?

Press Cmd+I on Mac or Ctrl+I on Windows with text selected. This toggles italic formatting on or off. The shortcut only works when your selected font family includes an italic variant.

Why can’t I italicize text in Figma?

Your font doesn’t include italic files. Figma requires actual italic font variants, unlike Word which creates faux italics. Check Google Fonts or your font source to verify italic availability, then switch fonts if needed.

How do I apply italic to only part of a text layer?

Double-click the text layer to enter edit mode. Drag to highlight specific words or characters. Press Cmd+I (Mac) or Ctrl+I (Windows). Only the highlighted portion receives italic formatting.

Where is the italic option in Figma’s interface?

Select your text layer and look at the right sidebar. Find the Typography section, click the font weight dropdown. Scroll through options to find “Italic” or variants like “Regular Italic” or “Bold Italic.”

Can I create faux italic if my font lacks italic support?

Yes. Install a skew plugin from Figma Community. Select your text layer, apply 10-15 degree horizontal slant. This simulates italic appearance but doesn’t use true italic glyphs designed by the font creator.

Which fonts in Figma have italic variants?

Inter, Roboto, Open Sans, Noto Sans, Montserrat, and Lato all include italic styles. Blinker and Jost don’t. Check the font weight dropdown to see available variants before committing to a typeface.

How do I create an italic text style in Figma?

Select text with italic formatting applied. Click the four-dot style icon in Typography section. Click “+” to create new style. Name it clearly like “Body Italic.” Style saves to Local Styles for reuse.

Does Figma support variable font italic axis?

Yes, but with limitations. Figma treats the italic axis as on/off (ital=0 or ital=1), not a slider. Access it through the Variable tab in type settings. Slant axis offers more granular control.

Why did my text randomly change to italic in Figma?

This bug occurs with some fonts like Gotham. Fix it using Quick Actions (Cmd+/), type “Select all with same font,” then reassign correct font weight. Installing identical font files across team members prevents recurrence.

How do I check if italic was applied correctly?

Look at the Typography panel. Font weight should show “Italic” in the name. In Dev Mode, CSS output displays font-style: italic. True italics show redesigned letterforms, especially on lowercase “a” and “f.”

Conclusion

Applying italic text in Figma comes down to three options: the Typography panel dropdown, the Cmd+I keyboard command, or a skew plugin when your font lacks italic variants.

The method you choose depends on your font family. Inter, Roboto, and Open Sans include true italic glyphs. Others don’t.

Check the font weight dropdown before starting any project. Save yourself the headache.

Creating reusable text styles with italic formatting keeps your design system consistent across files and team libraries.

Variable fonts offer additional flexibility through the slant axis in type settings.

Now you know how to handle italic formatting in Figma, whether your font cooperates or not. Time to get back to designing.