Edit fonts ¶
The Fonts tab ¶
Select the Fonts tab; the last of the tabs shown in the right-hand side of the CSS pane.
“Fonts used” by the currently inspected element. The new Fonts Editor. In Firefox 61 and 62, this section does not exist. “All fonts on page” — This section lists all of the fonts in use on the page. In Firefox 61 and 62, this area is labeled “Other fonts in page” and doesn’t include the fonts mentioned in the “Fonts used” section.
Fonts used ¶
They are listed in the element’s font-family CSS declaration value. They are applied to the element as part of the browser’s default styling (Times New Roman for most browsers), and no author-defined font has been supplied. They are used by a descendant of the inspected element, for example, when it is a container for other elements which have text content with fonts applied. They are system fallback fonts used when nothing from the font-family CSS declaration has been applied.
Fonts Editor ¶
Size ¶
Line height ¶
Weight ¶
Italic ¶
All fonts on page ¶
The font-family identifier and full name of the font. The URL to the font file in the case of web fonts not available on your system, or “System” in the case of fonts loaded from your computer (either default system fonts, or web fonts that you’ve also got installed on your system). You can copy the URL to the font file by clicking on the icon to the right of the URL. The @font-face descriptor that loads the font into the page, in the case of web fonts. The descriptor is expandable — when opened it shows its full syntax as defined in the stylesheet. A text sample, to give you an idea of what the font looks like when rendered. The default text for the sample is “Abc” but the preview text can be edited by clicking on the input field at the top of the section and entering a new value. Once entered, all of the sample text will be set to the same custom value.
Variable font support in Firefox Developer Tools ¶
What are variable fonts? ¶
font-variation-settings : "wght" three hundred and fifty ;
|
|
---|---|
|
|
|
|
|
|
|
|
|
Working with Variable fonts in the Font Editor ¶
Tips ¶
When using the Page Inspector’s 3-pane mode , you can view the CSS rules for the inspected element simultaneously alongside the Fonts tab. If you hover over the font-family property in the Rules view, a tooltip shows a sample of the font: You’ll also notice in the above screenshot that the font in the font-family font stack that is actually applied to the inspected element is underlined. This makes it easy to see exactly what is being applied where, when font stacks are specified.