How to use Safari to reveal font types, styles, and OpenType data

Use Safari to find your type

safari font info
Credit: Willi Heidelbach (CC BY-SA 3.0)

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 font info inspect element Stephen Glasskeys

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.

safari font info show all computed styles Stephen Glasskeys

Next, click Resources on the toolbar, and expand the Fonts folder. Selecting a font renders it full-sized in the center Content Browser pane.

safari font info resources, fonts, and stylesheets Stephen Glasskeys

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.

safari font info css class and opentype data Stephen Glasskeys

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?

ITWorld DealPost: The best in tech deals and discounts.
Shop Tech Products at Amazon