font-family fallback fonts not respected -- default font used if first one not found #12011

dlopuch opened this Issue Feb 25, 2014 · 5 comments


None yet

6 participants


The font-family CSS definition can list a few fonts. The browser is supposed to "select the first font on the list that is installed on the computer"

I've noticed that when the first font can't be loaded, none of the fallback fonts are attempted either. Possibly related to #10592 ("Web Fonts do not render, use fallback fonts instead"), but that one seems to be focused on webfont support whereas this issue is pointing out that phantom is not doing what it should on a font-family CSS definition, regardless of webfont or not.

Reproduced on ubuntu and os-x using Phantom 1.9.7.


  • Make sure you have a unique font installed, for example the beautiful and open Gentium
    • On ubuntu, verify it's installed with $ fc-list | grep -i gentium
  • Create a demo HTML file with a font-family list to rasterize with phantom:


  <head> <title>Testing Phantom Font Support</title> </head>
.family-with-fallback {
  font-family: "some font that does not exist", "Gentium", arial;
.size-36 {  font-size: 36; }
.size-28 {  font-size: 28; }
  <body style="background-color: white;">
    <div class="size-36">Default font @ 36.  Next line Gentium.</div>
    <div class="size-36 family-with-fallback">
      The Quick Brown Fox Jumped Over the Lazy Dog
    <div class="size-28 family-with-fallback">
      0123456789 <br/>


var system = require("system"),
    page = require("webpage").create();

page.viewportSize = {
  width:  1000,
  height: 100
};"./phantom-no-fallback-demo.html", function(status) {
    if ("fail" == status) {
        console.log("error Cannot load service page.");
    } else {
        console.log("Screen grab success.  Look for 'font-test.png' to see output.");
  • Run the script: $ phantomjs phantom-no-fallback-demo.js and look at font-test.png


  • Phantom should have fallen back to the second font in the font-family list (Gentium in this example)
  • In Chrome, it looks as expected: screen shot 2014-02-25 at 3 11 54 pm


  • Phantom just uses a default font after it can't find the first one:

  • If you change the .family-with-fallback definition to make Gentium or whatever the first font in your list, it works:

Conclusion is that phantom only tries the first font-family item instead of falling back across the entire list.


Did you try putting quotes around "arial" ?


getting the same problem


This still exists, I've tried to include Source Han Sans and it doesn't work properly.
For example if the font family is:

font-family: 'Titillium Web,source-han-sans-simplified-c,sans-serif'

it works fine on the browser, in phantomjs it doesn't, if I use instead

font-family: 'source-han-sans-simplified-c'

it works fine on phantomjs too

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment