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

Question

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 1

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<len;i++){
         var layerSet = layerSets[i];
         //$.writeln(layerSet.name);
         dumpLayers(layerSet.artLayers);
    }
}

function dumpLayers(layers){
    var len = layers.length;
    for(var i=0;i<len;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

Answer 2

the photoshop plugin SpecKing has an option to show/generate all typographic specifications within your photoshop file - could that help? I haven't tried it myself, but it looks useful.

Answer 3

Keep in mind that CSS font matching is based on the font family name, not the fullname (e.g. "Myriad Pro Bold") or the PostScript name (e.g. "MyriadPro-Bold"). Chrome/Safari on OSX will match the PostScript name but that's non-standard behavior, it won't work in Firefox and it won't work in any Windows-based browser. For use in CSS you'll need to map the PostScript name to family/weight/style combinations, so instead of MyriadPro-BoldIt:

font-family: Myriad Pro;
font-weight: bold;
font-style:  italic;

etc.

Answer 4

There are plugins/services that allow you to extract this (and other information) from PSDs:

• Avocode
• CSSHat
• Project Parfait
• CSS3PS

Answer 5

I know this was asked a while ago but there's also a website, PSDFonts.com, that can provide this information for you (although it won't provide an overlay).