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!


5 Answers 5


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;

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


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

function dumpLayers(layers){
    var len = layers.length;
    for(var i=0;i<len;i++){
         var layer = layers[i];
        if(layer.kind == LayerKind.TEXT){
         $.writeln('font: '+ layer.textItem.font +' font-size: ' + layer.textItem.size + ' color: #' + layer.textItem.color.rgb.hexValue);

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.

ExtendScript Toolkit screenshot

Based on this file: Text Layered PSD 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
  • I had no idea you could access Photoshop with JavaScript! Thanks for this, I ran it and it output 17 different font variations - very useful indeed! Nov 19, 2013 at 0:08

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.


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;



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


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.