CSS Font Style and Properties in Styles Pane in Microsoft Edge Browser

In Edge, the Elements tool Styles Pane provides a font editor to change the CSS font family and properties. This helps developers quickly check for different font styles and properties. The webpage directly updates with any changes made to the Font Editor in the Styles Pane.

Benefits of Font Editor in Style Pane:

• Instantaneous: The changes made in the font editor are reflected immediately on the webpage. This saves a lot of time, as users do not need to refresh the page every time changes are made.
• Simple: The UI is basic and simple to use. You have sliders and a drop-down list, which are more than enough to work on.
• Save Time: The Font Editor saves a lot of time in trial and error by giving us options in the browser itself. You do not have to switch between the code editor and the browser to check for changes.

Enable Font Editor in Style Pane:

The Font Editor is an experimental feature, so it is not present in the Styles pane in the Elements tab. To turn on the feature, follow these steps:

• Step 1: Right-click anywhere on the webpage and select Inspect from the context menu that appears. From the DevTools section that appears, select the Elements tab.
• Step 2: In the Elements tab, there will be a Styles pane. In that pane, various elements of CSS will be displayed. For each element, there will be a font editor button that has an A type of symbol.
• Step 3: The Font Editor is disabled for new users. To enable it, select the gear icon in the top-right corner of the DevTools. In settings, go to Experiments and check “Enable the new Font Editor tool within the Styles Pane“.

Enabling Font Editor

Using Font Editor using Style Pane:

In the Style Pane for every respective element of CSS, there will be an A-looking symbol; on clicking it, the Font Editor pops up. The font editor is divided into two sections:

1. Font-Family
2. CSS Properties

Font Editor

1. Font-Family:

The Font Editor provides the option to change the font family of the respective element. You can also provide a fallback font family in case the earlier one is not supported by browsers; a total of eight fallbacks can be added. The bin icon is to remove the particular font family. The font family is grouped into four sections:

• Computed fonts: The fonts present in the CSS of the webpage are in this category.
• System fonts: The fonts installed on the current OS are in this category.
• Generic font: Commonly used fonts fall under this category, such as sans-serif.
• Global values: Some CSS values, such as inherit, initial, and unset, fall under this category.

Setting Font-Family

2. CSS Properties

The Font Editor also provides various CSS font properties. These properties have a slider and the units associated with the slider, which can be changed according to user needs. The Font Editor also provides some preset values. To enter preset values, you can toggle the input type by pressing the up-down arrow at the end of each property input. The various units provided are px, em, rem, %, vh, and vw.

• Font Size: The values change the size of the font of the text in that element.
• Line Height: The space between each line of text can be changed using this property.
• Font Weight: The boldness can be changed using this property.
• Spacing: This property sets the spacing between each letter.

Setting CSS Properties

The font editor provides basic sliders and a drop-down list to change the font family and CSS properties. The editor is simple but effective enough, as it allows developers to save time in deciding the font styles without changing the code multiple times.