adobe photoshop - How to export font information for a specific PSD file for use in writing CSS

I'm doing front-end dev, so this question comes from that perspective. When I receive a .psd I manually go through each font in the design, click on it, then use the character panel to get the font, color, size, kerning, etc. Sometimes, I get a design that uses several different fonts (4+) with many variations of the same font (size, color, weight, etc.). This is pretty tedious work... Is there anyway that Photoshop can export a list of all the used fonts and their variations? For example, a list like:

Arial bold 16px black
Arial regular 14px black
Arial regular 14px blue
Oswald 32px rgb(13,74,56)
...

Any suggestions for this? Further, if there is a plugin of sorts that will just lay this information over the elements that would be fantastic!

Thanks.

Answer

Sure, you can use the ExtendScript Toolkit to investigate and manipulate Photoshop documents. For more info, check the documentation or search around the various PS scripting forums.

Based on the script in this article, I whipped up the following script. For every text layer in a PSD file, it will print the font, font-size, and fill-color to the javascript console:

function run(){
    var layerSets = app.activeDocument.layerSets;
    dumpLayerSets(layerSets);

    $.writeln("Top-level layers:");

    dumpLayers(app.activeDocument.layers);

}

function dumpLayerSets(layerSets){
    $.writeln("--- Processing...");
    var len = layerSets.length;
    for(var i=0;i         var layerSet = layerSets[i];
         //$.writeln(layerSet.name);

         dumpLayers(layerSet.artLayers);
    }
}

function dumpLayers(layers){
    var len = layers.length;
    for(var i=0;i         var layer = layers[i];
         if(layer.kind==undefined){
                continue;

         }
        if(layer.kind == LayerKind.TEXT){
         $.writeln('font: '+ layer.textItem.font +' font-size: ' + layer.textItem.size + ' color: #' + layer.textItem.color.rgb.hexValue);
        }
    }
}
run();

To test, open a document with text layers in Photoshop. Open the ExtendScript Toolkit and link it to your Photoshop instance. Paste the code above into the workspace and hit the run button.

Based on this file:

I received the following output:

--- Processing...
Top-level layers:
font: MyriadPro-It font-size: 144 pt color: #0000FF
font: MyriadPro-Bold font-size: 144 pt color: #00FF00
font: MyriadPro-Regular font-size: 144 pt color: #FF0000
Result: undefined