Today's short tutorial shows how to use Safari's built-in developer tool to reveal web page font and style information.
To begin, open a web page, highlight a short sample of page text, then Ctrl-click and select Inspect Element from the context menu.
Safari will then open its Web Inspector tool -- docked at the bottom of the window. Click Styles, Computed, and the Show All checkbox. Expand Properties to find the font-family name of the element text selected earlier.
Next, click Resources on the toolbar, and expand the Fonts folder. Selecting a font renders it full-sized in the center Content Browser pane.
And, if you need to know even more details about the font, click Content Browser's dropdown and pick Stylesheets. This view permits you to scroll through the entire length of embedded CSS3 @font-face data.
For further information regarding Safari's developer tool, consult Apple's About Safari Web Inspector page.
This article is published as part of the IDG Contributor Network. Want to Join?