Find all the fonts used in a Photoshop file

Question

I have this .psd (Photoshop file) and I'm trying to convert it to HTML & CSS.

Only thing I can't determine is what font they used in the .psd

How can I find out what fonts were used in the Photoshop file?

Solution 1

Depends on how you want to extract the information.

Per section or text area

Select the Text tool (T icon with serifs) and click on the text area to edit it. It will show what font is being used in the Character window.

All fonts used at a glance

1. Save or export the image document as a PDF
2. Open up the PDF version in Adobe Reader
3. Select File → Properties → Fonts

This will list all the embeddable fonts used in the PSD file, provided you can embed them.

Missing fonts

In the Character tool, go to the font selection drop down. At the end of the list will be the fonts that are used in the image but are missing from your system. These will typically be greyed out.

Rastersized images

If you see any rasterized images you need the font face of, you'd best export just that section as a clear, standalone image and use a service like What the Font to determine the font.

Solution 2

Save this script as a new file in your Photoshop > Presets > Scripts folder. Name it whatever you want, such as "Detect Fonts.jsx"

var p = new ActionReference();

function arrayUnique(a){
    var t = []
        i = a.length;

    while(i--) {
        var f = false,
        n = t.length;

        while (n--) {
            if(a[i] === t[n]) {
                f = true;
            }
        }

        if(!f) {
            t.push(a[i]);
        }
    }
    return t;
}

function findFonts() {
    p.putEnumerated( charIDToTypeID('Dcmn'), charIDToTypeID('Ordn'), charIDToTypeID('Trgt') );

    var c = executeActionGet(p).getInteger(charIDToTypeID('NmbL'))+1,
        fonts = [];

    while(c--) {
        var r = new ActionReference(),
            descLayer,
            layerStyles,
            countStyles;

        r.putIndex( charIDToTypeID( 'Lyr ' ), c );

        try {
            descLayer = executeActionGet(r);
        } catch (e) {
            continue;
        }

        if(!descLayer.hasKey(stringIDToTypeID( 'textKey' ))) continue;

        layerStyles = descLayer.getObjectValue(stringIDToTypeID('textKey')).getList(stringIDToTypeID('textStyleRange'));
        countStyles = layerStyles.count;

        while(countStyles--) {
            var n = layerStyles.getObjectValue(countStyles).getObjectValue(stringIDToTypeID('textStyle')).getString(stringIDToTypeID('fontPostScriptName'));
            fonts.push(n);
        }
    }

    return arrayUnique(fonts).sort();
}

if (documents.length) {
    var d = findFonts();
    alert(d.length +' fonts found\n'+d.join('\n'));
} else {
    alert('No fonts used in the active document.',);
}

Solution 3

The PSD file format is documented by Adobe - you can read how it stores font information.

You could then examine a hex dump of the file and use the file format specification to find the fonts.

Alternatively, the font names ought to be visible in the output of the stringsutility found on Linux/Unix systems.

Solution 4

This is actually very easy to do using PS scripts, which can iterate through the layers of your PSD and pull text layer data.

I've been experimenting lately with a JavaScript-based script to overlay font information directly on comps that get delivered to developers. It's not finished but if there's still interest (I see this is quite old) I can put up a quick-and-dirty version that simply pops up the fonts used in a window.

UPDATE: I put together a rough but working "lite" version of the script I'm developing. Feel free to contribute - https://github.com/davidklaw/completer. For those unfamiliar with scripts just take the script file and put it under your PS Presets/Scripts folder and it'll be available under File -> Scripts.

Solution 5

Quick and Easy Way To Find Missing Fonts

1. Windows -> Character A small character box will display with fonts information.

2. Select font name dropdown and scroll down till end.

3. You will notice list of missing fonts in light grey color at the end of font list.

From : http://www.bala-krishna.com/how-to-find-fonts-used-in-psd-file/

View more solutions

Comments

[dave]

the text is not rasterized, meaning its in a separate layer.

[Naidim]

@Dave: If the text is still editable, all you have to do is select it and see what appears in the font dropdown menu, or on the information palette. This is really obvious!

[slhck]

The question might be old, but it has almost 6,000 views. If you could provide a script, that would be very much appreciated! Welcome to Super User, by the way!

[David]

Good call. Open-source GitHub project is up. If anyone is familiar with basic JavaScript they should feel right at home.

[lepe]

+1: I came up with the same solution. For some reason GIMP didn't import the PSD correctly and I didn't know which font it was used. I analyzed the PSD file in an HEX editor to find it (Search for: "Font" as TEXT). Recommeded editor: "bless".

[Ejaz]

wow this actually works pretty good :D (y)!

[martixy]

There are numerous ways of enabling that panel: An additional one is Type -> Panels -> Character.

[davidcondrey]

Your script is broken on line 8

[Rob W]

+500000 points. Incredible.

[Giovazz89]

It opens the file in javascript, without sending it to a server, in your own browser page! You have to drop the file to specify the file path...

[Thalys]

You might want to disclose any affliation you have with the projects mentioned, even if its free.

[paulmz]

The "Free Photoshop Font Detector" is no longer available as a free download and is now part of an expensive extension FontHero for $39.

[davidcondrey]

github.com/dcondrey/DetectFontsinPSD

[Dima Kurilo]

To write text in clipboard use this answer: stackoverflow.com/a/13983268/1578857

[Drew]

(Photoshop CC2018) Error 8500: The requested property does not exist. Line 53: var n = layerStyles.getObjectValue(countStyles).getObjectValue(strin‌​gIDToTypeID('textSty‌​le')).getString(stri‌​ngIDToTypeID('fontPo‌​stScriptName'));

[Drew]

None of those are available. LayerHero is dead.. Amazingly, you can download Font Detector from the WayBack machine: web.archive.org/web/20171211184218/http://www.layerhero.com/‌​… However I haven't been able to install it, neither with Anastasiy's Extension Manager nor Adobe ExMan.

[Drew]

Looks like it has some potential, but it requires installing DreamWeaver..

[Drew]

And on line 12. Error 8500, property does not exist: outputFile.write( .

[Michiel van der Blonk]

site is not active anymore

[agrath]

@Drew I am about to post an updated answer with a fixed version of the script