Super User is a question and answer site for computer enthusiasts and power users. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question
Any acceptable answer so far ? – Milche Patern Sep 5 '13 at 14:33

14 Answers 14

up vote 49 down vote accepted

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.

share|improve this answer

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.

share|improve this answer
+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". – lepe Aug 1 '13 at 8:57

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

share|improve this answer
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! – slhck Jul 18 '12 at 3:14
Good call. Open-source GitHub project is up. If anyone is familiar with basic JavaScript they should feel right at home. – David Jul 18 '12 at 13:08
wow this actually works pretty good :D (y)! – Ejaz Aug 14 '14 at 21:49

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.

enter image description here

From :

share|improve this answer
There are numerous ways of enabling that panel: An additional one is Type -> Panels -> Character. – martixy Mar 2 '15 at 14:58

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) {
    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(),

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

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

        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'));

    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.',);

enter image description here

share|improve this answer
+500000 points. Incredible. – Half Crazed Mar 3 at 16:42

If the text has already been rasterized, the easy way would be to crop the area with the typeface you want to identify, save as a .png and upload it to WhatTheFont, where it should be able to tell you what it is, unless it is an obscure or bespoke one.

Identifont is another site you can use, where you describe characteristics of the typeface.

share|improve this answer
the text is not rasterized, meaning its in a separate layer. – dave Apr 9 '11 at 18:01
@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! – paradroid Apr 10 '11 at 11:10

I would take a snap of the text you need (preferably zoomed in) and use WhatTheFont to get some guesses. (Shouldn't the typeface be shown when you open the PSD and select the respective text, though?)

And of course, if it's not a web-safe font, you'll need to find an appropriate way of replacing it, or providing a fallback stack.

share|improve this answer

Open Photoshop. Go to Windows » Character. A small box will pop up. Just select the text layer and the box will tell you the font family, size, et cetera.

share|improve this answer

Use online tool to get fonts of psd file

share|improve this answer

Developer asked me almost the same think like you needed. I came up with editing simple script, to export layer properties (text, font name, font size, font color) which you need when developing, to a single txt file (should work on Windows machine).

Just save this like "ExportTexts.js" and put in Adobe Photoshop > Presets > Scripts.

After that, run (or restart) Photoshop and run script (File -> Scripts -> ExportTexts). Also make sure you ungrouped all layers before doing this. Exported file should be in a same dir as psd file.

if (documents.length > 0)
    var docRef = activeDocument;
    CurrentFolder = activeDocument.path;
    var outputFile = new File(CurrentFolder + "/" + + "fonts.txt" );"w");
    for (var i = docRef.layers.length-1 ; i >=0 ; i--)
        docRef.activeLa`enter preformatted text here`yer = docRef.layers[i]
        if (docRef.activeLayer.kind == LayerKind.TEXT)
            docRef.activeLayer.textItem.contents + "\n" + 
            docRef.activeLayer.textItem.font +"," +
            docRef.activeLayer.textItem.size +"," +
            docRef.activeLayer.textItem.color.rgb.hexValue  + "\n\n\n");
    alert("You must have at least one open document to run this script!");
docRef = null
share|improve this answer
Your script is broken on line 8 – davidcondrey Apr 29 '15 at 22:17

There's a free Photoshop Extension/Panel which can do this job for you, Free Photoshop Font Detector (, and if you want to collect/copy font files from system folder, try Photoshop Art Packer(

share|improve this answer

There is an option on the Layers tab that lets you filter all of the layers to show only the fonts. You have to select each layer to actually see them and it is useful only if you need a quick glance at them

Hope it helps someone three years after this was asked.

share|improve this answer

Use Creative Cloud Extract

It will list all fonts used (among other handy things).

share|improve this answer

To get the fonts information form a PSD file you can use online tools if you can't or won't use Photoshop (or if you prefer using Gimp, that rasterizes PSD fonts).

For example you can try out this html5 PSD font online extractor "Get PSD Fonts".

It's a PSD font information extractor based on Melitingice Github project psd.js that does not require uploading files, working locally in your browser page

share|improve this answer
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... – Giovazz89 May 9 at 13:33
You might want to disclose any affliation you have with the projects mentioned, even if its free. – Journeyman Geek May 9 at 14:15

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .