PhantomJS 1.9.7 doesn't show icon font

bugwelle commented 10 years ago

Hello, I'm using PhantomJS to automatically create screenshots of my mobile web app. I'm also using FontAwesome (an icon font) and everything worked finde until I updated PhantomJS from 1.9.1 to 1.9.7 using Homebrew.

With the latest PhantomJS version I get this for every single icon:

phantom

OS: MacOS X 10.9.2 node: v0.10.26 PhantomJS: 1.9.7

Any ideas?

Regards, Andre

wachunga commented 10 years ago

I have also seen this with FontAwesome on OSX and 1.9.7 via homebrew.

weisjohn commented 10 years ago

Can confirm.

stevematyas commented 10 years ago

Install the Font Awesome library into your OSX Fonts via Font Book.app

bugwelle commented 10 years ago

Haven't tried that, yet. But shouldn't all icon font files be loaded and used?

stevematyas commented 10 years ago

(Issue posted here: https://github.com/ariya/phantomjs/issues/12320)

Context: Using phantomjs to process HTML and output PDFs (reports). To produce the HTML, I'm using a handlebars html template + json data from within node.js and then pass this HTML content off to phantomjs via page.setContent(...). The HTML that is loaded by PhantomJS shown later / below.

Problem: In certain situations, phantomjs is able to render a PDF and the FontAwesome fonts are visible within the resulting PDF however, in certain situations (seemingly randomly) the FontAwesome fonts are NOT visible within the PDF.

Goal: To generate PDFs from HTML using phantomjs that always, 100% of the time, display (visible) the FontAwesome fonts / icons / images.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<title>NA</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style media="all">
@font-face {
    font-family: FontAwesome;
    src: url('font-awesome-4.1.0/fonts/fontawesome-webfont.ttf');
}
</style>

<style media="all">
/*!
*  Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome
*  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/
/** OMITTED actual CSS (inlined font-awesome.min.css minus the @font-face declaration) **/
</style>

<script src="js/lib/jquery/jquery.js"></script>
<script src="js/lib/jquery.columnizer/src/jquery.columnizer.js"></script>
<script>
        function buildPages(pageNumber){
           //recursive function that invokes jquery columnizer to layout the content.. 
        }
        function postBuildPages() {
            setTimeout(function() {
                if (typeof window.callPhantom === 'function') {
                  window.callPhantom({ status: 'success' }); // will trigger the 'onCallback' handler within node.js 
                }
            }, 100); //adding a delay in hopes that phantomjs will have more time to process 
        }
        setTimeout(function () {
            buildPages(pageNumberStart);
            postBuildPages();
        }, 100); //adding a delay in hopes that phantomjs will have more time to process 
</script>
</head>

<body class="base">
    <div>
        <span><i class="fa fa-circle"></i> A </span>
        <span><i class="fa fa-circle-o"></i> B</span>
        <span><i class="fa fa-adjust"></i> C </span>
        <span><i class="fa fa-times"></i> None </span>
    </div>
</body>
</html>

var _ = require('lodash'),
    fs = require('fs'),
    uuid = require('uuid'),
    PhantomPool = require('./lib/phantom-pool'),
    Generator = require('../base'),
    HTMLGenerator = require('../html'),
    cargoweb = require('../../web'),
    stringFormat = require('string-format'),
    util = require('util');

/**
 * Cargo PDF Generator
 *
 */
module.exports = Generator.extend({
    // options for print layout
    _pageSettings: {
        width: '8.5in',
        height: '11in',
        orientation: 'portrait',
        border: '0.4in'
    },

    init: function(options) {
        options = options || {};

        this._port = options.serverPort || 8000;
        this._delayRenderTimeout = options.delayRenderTimeout || 100;
        this._phantomPoolSize = options.phantomPoolSize || 8;

        this._pool = new PhantomPool(this._phantomPoolSize);
        this._server = cargoweb.listen(this._port);
        this._htmlGenerator = new HTMLGenerator();
    },

    generate: function(rcfContent, templateContent, cb) {
        var tmpFile = '/tmp/{0}'.format(uuid.v4()),
            self = this;

        this._htmlGenerator.generate(rcfContent, templateContent, function (htmlContent) {
            self._pool.acquire(function (session) {
                session.createPage(function (page) {
                    page.set('onResourceError', function(resourceError) {
                        console.error('Unable to load resource (#' + resourceError.id + 'URL:' + resourceError.url + ')');
                        console.error('Error code: ' + resourceError.errorCode + '. Description: ' + resourceError.errorString);
                    });

                    page.set('onError', function(msg, trace) {
                        var msgStack = ['ERROR: ' + msg];
                        if (trace && trace.length) {
                            msgStack.push('TRACE:');
                            trace.forEach(function(t) {
                                msgStack.push(' -> ' + t.file + ': ' + t.line + (t.function ? ' (in function "' + t.function +'")' : ''));
                            });
                        }
                        console.error(msgStack.join('\n'));
                    });

                    page.set('onCallback', function (data) {
                        setTimeout(function(){
                            page.render(tmpFile, { format: 'pdf' }, function() {
                                page.close();
                                page = null;
                                self._pool.release(session);
                                fs.readFile(tmpFile, { encoding: 'binary' }, function (err, pdfContent) {
                                    fs.unlink(tmpFile);
                                    cb(pdfContent);
                                });
                            });
                        }, self._delayRenderTimeout);
                    });

                    page.set('paperSize', self._pageSettings, function() {
                        page.setContent(htmlContent, 'http://localhost:'+self._port, function() { 
                            //web page will fire an message when done!
                            /**
                                if (typeof window.callPhantom === 'function') {
                                  window.callPhantom({ status: 'success' });
                                }
                            */
                        });
                    });
                });
            });
        });
    },

    destroy: function() {
        if (this._pool) this._pool.destroy();
        if (this._server) this._server.close();
        if (this._htmlGenerator) this._htmlGenerator.destroy();
    }
});

Tech Stack:

{
  "name": "cargo",
  "version": "0.1.8",
  "bin": {
    "cargo": "bin/cargo.js"
  },
  "dependencies": {
    "amdefine": "^0.1.0",
    "async": "^0.9.0",
    "body-parser": "^1.3.0",
    "cli": "0.6.2",
    "connect-busboy": "0.0.1",
    "errorhandler": "^1.0.2",
    "express": "^4.4.2",
    "handlebars": "^1.3.0",
    "jade": "^1.3.1",
    "lodash": "2.4.1",
    "minimist": "0.1.0",
    "moment": "^2.6.0",
    "phantom": "^0.6.3",
    "string-format": "^0.2.1",
    "uuid": "^1.4.1"
  },
  "devDependencies": {
    "dateformat": "^1.0.8-1.2.3",
    "ejs": "^1.0.0",
    "grunt": "0.4.5",
    "grunt-cli": "0.1.13",
    "grunt-contrib-clean": "^0.5.0",
    "grunt-contrib-compress": "^0.9.1",
    "grunt-contrib-connect": "0.7.1",
    "grunt-contrib-jasmine": "0.6.5",
    "grunt-contrib-jshint": "0.10.0",
    "grunt-contrib-less": "0.11.1",
    "grunt-jasmine-node": "0.2.1",
    "grunt-newer": "0.7.0",
    "grunt-nexus-deployer": "0.0.3",
    "grunt-template-jasmine-requirejs": "0.2.0"
  }
}

OS: Distributor ID: Ubuntu Description: Ubuntu 12.04.3 LTS Release: 12.04 Codename: precise node: v0.10.28 PhantomJS: 1.9.7 FontAwesome: 4.1.0

arj03 commented 10 years ago

We had the same problem. Reverting to 1.9.1 "solved" the problem.

To make it easier to google, the icon looks like a space invader ;-)

aricearice commented 9 years ago

Experiencing the same problem

bianchimro commented 9 years ago

Same thing here. No iconic font rendered in 1.9.8, on OSX 10.10

atomictag commented 9 years ago

Phantom 1.9.8 OSX installed with Homebrew. I followed @stevematyas suggestion and installed the Font Awesome .ttf and now the font is rendered correctly

rjbernaldo commented 9 years ago

Was experiencing the issue with Ionicons, followed @stevematyas suggestion and installed the ttf using Font Book, and everything is now working perfectly. Thank you very much.

eugene1g commented 9 years ago

I had a similar-looking issue with V2, but in that scenario it turned out to be a local fault. Posting here in case someones had the same oversight -

We used the standard CSS definition Font Awesome, but removed all physical font files except for .woff and .eot Phantom read the CSS definition and picked .ttf font-file to load (which we found out by looking through access logs). The .ttf file did not exist, so nothing was pulled in - after we restored the ttf file, V2was able to render PDFs with all icons present.

GuyMograbi commented 9 years ago

+1 - still happens in 1.9.17..

if anyone is looking for 1.9.1 - we found it at: http://code.google.com/p/phantomjs/downloads/list?can=1&q=&colspec=Filename+Summary+Uploaded+ReleaseDate+Size+DownloadCount

abenrob commented 9 years ago

Any leads on this that don't involve installing the fonts? I'm using 1.9.7 on the server for a public webapp. The fonts are located in the public directory for the app, but phantom is somehow missing them.

rafaelverger commented 8 years ago

Downgrading to 1.9.1 also worked for me :)

w33ble commented 8 years ago

@stevematyas thanks a ton for posting that, I hadn't even thought about overriding the @font-face for font-awesome. TrueType fonts still would not work for me, despite my best efforts, but using the SVG font did the trick.

In my case, I use execute to inject a little javascript that loads an external css file to do my overrides. Simply injecting the following css, either as an inject style tag or link to a css file (both worked) was all it took:

@font-face {
  font-family: 'FontAwesome';
  src: url('/path/to/font-awesome.svg') format('svg');
}

Using version 1.9.8

alliejanoch commented 8 years ago

I was having a lot of similar problems, and I just upgraded to the latest version of Phantom (2.1.3) and all my problems have been fixed.

vitallium commented 8 years ago

This was fixed in 1.9.8 version (.ico files only were supported).

ariya / phantomjs

PhantomJS 1.9.7 doesn't show icon font #12132