: 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

@Dunderdale640

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


Avocode
CSSHat
Project Parfait
CSS3PS

Vote Up Vote Down

@Looi7658678

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).

Vote Up Vote Down

@Courtney577

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.

Vote Up Vote Down

@Chiappetta793

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.

Vote Up Vote Down

@Phylliss782

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

Vote Up Vote Down