How to use the Webpage Font Inspector.
Inspect computed styles rather than assuming the first CSS font loaded successfully. Record weights and fallbacks that affect the rendered text.
Make the workflow fit your task.
Select representative headings and body text, recording font family, size, weight and line height from available styles. Separate the declared fallback stack from evidence of the font actually rendered. Check loading state and responsive variations before reporting a page-wide pattern.
- What you provide
- Selected page's computed text styles.
- What you get
- Font families, weights and sizes actually applied.
See the input and the result.
Illustrative input and output · a teaching example, not a live WebAct run
Example input
Supplied style inspection of h1: font-family "Example Sans", Arial, sans-serif; font-size 40px; font-weight 700; line-height 48px. No rendered-font inspection or loading evidence supplied.
Completed example
Element: h1 Declared/computed family stack: "Example Sans", Arial, sans-serif Size: 40px Weight: 700 Line height: 48px Actually rendered face: unconfirmed. The family stack alone does not prove Example Sans loaded.
Load this input into the prompt, then copy it to WebAct to try the task. Your result may differ from the illustration.
Decisions and troubleshooting.
Does a computed font-family value prove the first named font rendered?
No. It can describe the declared stack. Confirm the rendered face with suitable browser inspection when that distinction matters.
Why do two elements with the same family look different?
Weight, variable-font settings, size, spacing or fallback for particular characters may differ. Inspect those properties rather than family alone.
Try it with your own source.
Replace the example with your material in the task prompt. Keep the requirements you need, then copy the task into WebAct.
Customize and copy the task ↑