csswkhtmltopdffont-family

font-family rule: Must I include spaces in local font names?


Although I have installed the Liberation Sans font on my Windows machine, it is not used by Google Chrome when it renders the first line in the snippet below. Apparently this is because the font-family rule uses the PostScript name LiberationSans (without a space). When I add the space (as for the second line), it works:

enter image description here

Must I always include the spaces in local font names in a font-family rule? I ask because this stylesheet uses PostScript names without spaces in order to address a flaw in wkhtmltopdf.

.psname {
  font-family: LiberationSans, Arial;
}
.name {
  font-family: "Liberation Sans", Arial;
}
<p class="psname">Jove, look at this font!</p>
<p class="name">Jove, look at this font!</p>


Solution

  • If you want to refer to local font family, you have to write it exactly as the font family is spelled on any given OS. In practice, if you need to support legacy names, you'll need to spell the font-family in both ways. List even more names if it turns out that the same font has yet-different spelling on some system. For example:

    font-family: "Liberation Sans", "LiberationSans", "Arial", sans-serif;
    

    Note that I added keyword sans-serif as a fallback, too, in case the OS wouldn't have any of the listed local font families. You should use quotes for all strings and no quotes for the keywords. Due historical reasons most browsers supports leaving out the quotation characters with spaceless names but you shouldn't trust on that. The official syntax is just strings or predefined keywords.

    As for the wkhtmltopdf, it has been so buggy in my experience that you probably do not want to use it. I'd recommend using electron-pdf instead, if you can install the required dependencies (basically npm with recent enough Node.js, maybe xvfb-run, too, if you want to run electron-pdf headless).