«   Previous tip Next tip   »

Chrome DevTools: Easily control typography with the CSS Font Editor

Last updated: 23rd July 2021
Easily control typography with the CSS Font Editor


The Font Editor within the Styles Pane helps you to quickly change typography on a web page - using a visual tool rather than typing in CSS properties and values. You can adjust the following:

In addition, you can specify a fallback font.

Having quick access to these commonly used CSS properties helps make prototyping easier. The Font Editor also acts as a reminder as to which typography related properties (and values) can be used.

How to use this feature

To use the Font Editor, follow these steps:

  1. Inspect some text with DevTools.
  2. Click on the Font Editor icon within the Styles Pane (marked by two overlapping "A"'s).
  3. Make some changes within the Font Editor and observe the page updates instantly.


This feature is in Chrome Stable, however it needs enabling from the Experiments Panel. To enable:

  1. From DevTools, enter Cmd + Shift + P > Show Experiments.
  2. Type in font in the Experiments Filter box.
  3. Enable the Font Editor Experiment.

Further Resource

DevTools also has a built-in shadow editor which provides a visual interface for editing box shadows and text shadows.

«   Previous tip Next tip   »

Sign up to receive a developer tip, in the form of a gif, in your inbox each week