Chrome DevTools: Easily control typography with the CSS Font EditorLast updated: 23rd July 2021
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:
- Font Family for example, you can insert the style
font-family: Comic Sans MS
- Font Size can insert the style
font-size: 2.8rem(the unit is customisable)
- Line Height inserts a style such as
line-height: 0.7(the unit is customisable)
- Font Weight can insert a style such as
font-weight: 300or even
- Spacing can insert a style like
letter-spacing: -0.155em(the unit is customisable)
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:
- Inspect some text with DevTools.
- Click on the Font Editor icon within the Styles Pane (marked by two overlapping "A"'s).
- 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:
- From DevTools, enter Cmd + Shift + P > Show Experiments.
- Type in
fontin the Experiments Filter box.
- Enable the Font Editor Experiment.
DevTools also has a built-in shadow editor which provides a visual interface for editing box shadows and text shadows.