{"action":"reopened","issue":{"url":"https://api.github.com/repos/typekit/webfontloader/issues/348","repository_url":"https://api.github.com/repos/typekit/webfontloader","labels_url":"https://api.github.com/repos/typekit/webfontloader/issues/348/labels{/name}","comments_url":"https://api.github.com/repos/typekit/webfontloader/issues/348/comments","events_url":"https://api.github.com/repos/typekit/webfontloader/issues/348/events","html_url":"https://github.com/typekit/webfontloader/issues/348","id":189215145,"number":348,"title":"Doesn't work with PhantomJS render PDF","user":{"login":"IAMtheIAM","id":13709948,"avatar_url":"https://avatars.githubusercontent.com/u/13709948?v=3","gravatar_id":"","url":"https://api.github.com/users/IAMtheIAM","html_url":"https://github.com/IAMtheIAM","followers_url":"https://api.github.com/users/IAMtheIAM/followers","following_url":"https://api.github.com/users/IAMtheIAM/following{/other_user}","gists_url":"https://api.github.com/users/IAMtheIAM/gists{/gist_id}","starred_url":"https://api.github.com/users/IAMtheIAM/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/IAMtheIAM/subscriptions","organizations_url":"https://api.github.com/users/IAMtheIAM/orgs","repos_url":"https://api.github.com/users/IAMtheIAM/repos","events_url":"https://api.github.com/users/IAMtheIAM/events{/privacy}","received_events_url":"https://api.github.com/users/IAMtheIAM/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2016-11-14T20:20:17Z","updated_at":"2016-12-06T16:16:07Z","closed_at":null,"body":"1. What steps will reproduce the problem?\r\n  1. Load this page to see how it should look: http://monsoonreporting-dev.azurewebsites.net/taxreports/taxsummaryreport?upid=US0401330209103\r\n  2. POST `upids=US0401330802165` to `http://dev.mymonsoon.com/api/print/pdfs` with `Content-type:application/x-www-form-urlencoded`\r\n  3. Download the returned PDF and compare with the page in step 1\r\nWebfontloader does not seem to work with PhantomJS 2.1.1\r\n\r\nWhen I load my page in the browser, it loads 2 fonts, Roboto (from google web fonts) and Roboto-Regular (from locally).  \r\n\r\nhttp://monsoonreporting-dev.azurewebsites.net/taxreports/taxsummaryreport?upid=US0401330209103\r\n\r\n**You will see at the top right of the page in red text:**\r\n\r\n```\r\nWebFonts Active.\r\nFont Active: Roboto-Regular N4\r\nFont Active: Roboto N4\r\nFont Loading: Roboto N4\r\nFont Loading: Roboto-Regular N4\r\nWebFonts Loading.\r\n```\r\n\r\nHowever, when I run my node script to fetch the page and generate it into a PDF, it does not hit Font Active. It only shows this:\r\n\r\n```\r\nFont Loading: Roboto N4\r\nFont Loading: Roboto-Regular N4\r\nWebFonts Loading.\r\n```\r\n\r\nAnd the PDF is rendered with fallback font, not Roboto. CSS is set to use Roboto. The same occurs when CSS is set to use Roboto-Regular.\r\n\r\nWhat is causing this to fail loading when using PhantomJS?\r\n\r\nHere is my NodeJS code which generates the PDF\r\n\r\n```\r\nvar phantomInstance, page, thisPDFfileName = `taxSummaryReports-${randomInt}.pdf`;\r\n\r\n    phantom.create()\r\n        .then(function (phInstance) {\r\n            phantomInstance = phInstance;\r\n            return phantomInstance.createPage()\r\n        })\r\n\r\n        .then(function (websitePage) {\r\n            console.log('Getting HTML...');\r\n            page = websitePage;\r\n\r\n            // Setting useragent for phantomjs to render webfonts - didn't change anything\r\n            // page.property('settings.userAgent', 'Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36');\r\n\r\n            return page.open(reportURL, postSettings)\r\n        })\r\n\r\n        .then(function (status) {\r\n            if (status) console.log(status);\r\n\r\n            // Create and stream the PDF to the browser\r\n            console.log('HTML Received. Making PDF...');\r\n\r\n            var pageOptions = {\r\n                format: 'Letter',\r\n                // width: '8.27in',\r\n                // height: '11.69in',\r\n                // directory: '/temp',\r\n            };\r\n\r\n            // you can't set phantom page properties directly - use page.property() to set them\r\n            page.property('paperSize', pageOptions);\r\n\r\n            // Setting timout for phantomjs to render webfonts - didn't work\r\n            // setTimeout(function () {\r\n            return page.render(thisPDFfileName)\r\n            // }, 1600);\r\n\r\n        })\r\n\r\n        .then(function () {\r\n\r\n            try {\r\n                var filePath = thisPDFfileName;\r\n                console.log('Page Rendered');\r\n                console.log('PDF Saved in to disk as: ' + filePath);\r\n\r\n                var res = responsePrintServer;\r\n\r\n                // set headers\r\n                res.setHeader('Content-Type', 'application/pdf');\r\n                res.setHeader('Content-Disposition', `attachment; filename=${filePath}`);\r\n\r\n                // need to set the cookie to trigger jquery.fileDownload.js success callback\r\n                res.cookie('fileDownload', true, {httpOnly: false, path: '/'});\r\n\r\n                // need to enable CORS or the cookie won't get set\r\n                res.setHeader('Access-Control-Allow-Origin', '*');\r\n\r\n                // Set to true if you need the website to include cookies in the requests sent to the API\r\n                // (e.g. in case you use sessions)\r\n                res.setHeader('Access-Control-Allow-Credentials', true);\r\n\r\n                // read the file from disk and create a readstream\r\n                console.log('Reading PDF from disk');\r\n                var fileStream = fs.createReadStream(filePath);\r\n                fileStream.on('end', function () {\r\n                    fs.unlink(filePath, function (err) {\r\n                        if (err) console.log('readstream html-pdf error:', err)\r\n                    })\r\n                });\r\n\r\n                // send file readstream to the browser\r\n                console.log('Streaming PDF for UPIDs: ' + UPIDs);\r\n                fileStream.pipe(res);\r\n\r\n                // Cleanup - delete the rendered PDF once it's sent to the browser, so it doesn't fill up the disk\r\n                onFinished(res, function (err) {\r\n                    if (err) return console.log(err);\r\n                    // destroy(fileStream);\r\n                    del.sync([thisPDFfileName]);\r\n                    console.log(`PDF ${thisPDFfileName} destroyed.`);\r\n                });\r\n            }\r\n            catch (error) {\r\n                console.log(error);\r\n\r\n                // Cleanup - delete the rendered PDF when errors occur, so it doesn't fill up the disk\r\n                del.sync([thisPDFfileName]);\r\n                console.log(`PDF ${thisPDFfileName} destroyed.`);\r\n            }\r\n            // Close this phantomjs instance\r\n            phantomInstance.exit();\r\n            console.log('PhantomJS closed. Script has finished successfully`.');\r\n        })\r\n\r\n        .catch(error => {\r\n            console.log(error);\r\n            phantomInstance.exit();\r\n        });\r\n```\r\n\r\n"}}
{"actor":{"display_login":"IAMtheIAM"}}