Edit CSS font styles and settings in the Styles pane

Typography on the web is an important part of the user experience. You want to ensure you meet corporate brand guidelines, and your content displays as expected on various devices. Text must be easy to read using size and line-height. Users may resize fonts to meet individual needs. For situations when specific fonts are not available on a user device, you should provide fallback font options.

CSS provides better support for typography in recent years. Dozens of different CSS units are available to define the size of text. You also have several CSS properties that affect font-size, spacing, line height, and other typographic features.

To make it easier when working with typography, a visual Font Editor is now in the Styles pane. You may change your font settings, and the changes are rendered immediately in the browser. All without in-depth knowledge of CSS.

Currently the Enable new font editor tool within the Styles pane feature is experimental and you need to turn it on for Microsoft Edge Developer Tools.

Any CSS in the Styles pane, either font definitions or inline styles, automatically displays an icon that opens the visual Font Editor. To open the visual Font Editor, choose the Font Editor icon.

All fields in the visual Font Editor are populated from the values in the CSS in the Styles pane. For example, the line-height definition is set to 160% in the Styles pane, so the line height text field displays 160, and the unit dropdown displays %. Also, the slider is automatically set to match the values of the text field.

The Font Editor consists of two parts: the Font Family selector, and the CSS Properties editor.

The Font Family selector

The Font Family selector is the upper part of the visual Font Editor. To choose the fonts of the CSS rule, in the CSS editor, use the Font Family selector. You may choose main and fallback fonts for each CSS rule.

The Font Editor open on top of the Styles pane with the Font Family selector highlighted

Use the Font Family dropdown to choose from a list of fonts. Fonts are organized into four groups.

  1. Computed fonts, which are the fonts available in the stylesheet in the Styles pane.
  2. System fonts, which are the fonts that are available on the current operating system.
  3. Generic font families, such as serif or sans-serif.
  4. Global values, such as inherit, initial, and unset.

The font editor open on top of the Styles pane with the Font Family selector highlighted

After you choose a font, another dropdown menu is displayed for you to choose fallback fonts. You may choose up to eight fallback fonts. To remove a font, choose the Delete Font Family icon.

Note

If you choose a global value for font family, you do not get another dropdown since there is no fallback for it in CSS.

The CSS Properties editor

You may change CSS font properties in the lower part of the visual Font Editor. You may change the font size, line height, font weight, and letter spacing using any of the UI controls. Your changes are applied immediately in the browser.

The font editor open on top of the Styles pane with the CSS properties highlighted

You may also convert CSS units using the visual Font Editor. For example, you may use the tool on a CSS rule where the Font Size slider is initially set to 16 pixels. Now, use the unit dropdown and choose the value em. The 1 em displayed is equal to 16 pixels.

The unit dropdown provides all the numeric CSS units that are available. Font size, line height, font weight, and spacing all use different units. When the text boxes have focus, you may select the arrow up and arrow down keys to fine-tune your settings. To use the sliders with a keyboard, select the arrow left and arrow down keys.

The CSS Properties editor also includes preset keywords. To use the preset keywords, on the right-hand side, choose the Toggle Input Type icon. The UI changes, and a dropdown of preset keywords are displayed. To return to the UI with the slider and other UI controls, choose the Toggle Input Type icon again.

Open the preset keyword interface

Getting in touch with the Microsoft Edge DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • Tweet at @EdgeDevTools.
  • Submit a suggestion to The Web We Want.
  • To file bugs about this article, use the following Feedback section.

The Send Feedback icon in the Microsoft Edge DevTools