I've googled this but this info seems hard to find. Is there a way to identify header fonts using dev tools? I can get the body text, but clicking the various tabs (including COMPUTED) does not produce the header font.
-
1You simply select the HTML element you want to inspect. The duplicate should explain and give you a few alternatives– CaiCommented Feb 10, 2017 at 7:12
-
Ah! Didn't see your comment when I was writing my answer. Answers on duplicate should provide additional insight, especially if for some reason dev tools doesn't work for you.– HassanCommented Feb 10, 2017 at 7:17
-
This doesn't really add anything to the given answers, but I've enjoyed using Fontface Ninja.– JoonasCommented Feb 10, 2017 at 12:44
-
Cai, that does not work for me. As explained, I'm trying to get the headers. Your way only shows me the body text.– TCDesignerCommented Feb 10, 2017 at 19:05
-
1@TCDesigner devtools shows you the font stack of whatever you have selected, it doesn't care what is a body or header just what DOM elements are selected.– CaiCommented Feb 10, 2017 at 20:06
|
Show 2 more comments
2 Answers
Chrome Dev Tools should show font of selected element in computed tab. It lists all of the css attributes regarding that element - font-family included.
A really great chrome extension I've been using is the CSS Peeper: https://csspeeper.com/
It's real easy to get fonts, colors and assets and you get all relevant info fast when just clicking on an element.
