Search code examples
javascriptcssphantomjswebfonts

Why don't Material Icons render in phantom js?

Recently I'm making some experiments with phantom js to take screenshots of html code but I'm getting a estrange error with materialize icons font.

I have made a demo html like this

<!DOCTYPE html>
<html lang='en'>
  <head>
    <title>Demo</title>
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
    <link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'> 
    <style>
         html {
            font-family: 'Roboto', sans-serif;
         }
    </style>
  </head>
  <body>
      Hello this is using roboto
      <i class='material-icons'>favorite_border</i>
  </body>
</html>

Roboto is working great but material icons do not work. The following image is the result I get: enter image description here

And this should be what i get:

enter image description here

I think that is because material icons use 

-webkit-font-feature-settings: 'liga'

and phantomjs do not support it, am I right?. Font awesome works just fine. Any clue?

I'm runing it in ubuntu server 16.04 lts and phantom js is 2.1.1 Thanks for helping

Solution

  • It looks like this has been fixed in the latest beta 2.5 version of phantomjs, see https://github.com/ariya/phantomjs/issues/14885.

    Another solution is to self-host the web front. If you're serving the font from your own server, phantomjs has no problem rendering it.