Clever Geek Handbook

PhantomJS font highlighting

Can PhantomJS display a TrueType font embedded in a webpage? I have my css like this

@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: normal;
src: local('Roboto-Regular.ttf'), url('Roboto-Regular.ttf') format('truetype');
}
+3


source to share


3 answers


The answer is "It depends." Phantomjs, as a "headless" browser, is like any other browser in that it can only display fonts like the one above if that font is installed on the rendering system. If I have Roboto installed on my machine, when I get to your webpage, then I will see Roboto as expected. If, however, I don't have Roboto installed on my local machine, it will display whatever default fallback font my browser uses.

Phantomjs is more than capable of rendering Google fonts like Roboto if you download them as external fonts linked to a third party site. Or better yet, use https://github.com/typekit/webfontloader , which will do the heavy lifting of loading websites for you.



Since Phantomjs 2.0, phantomjs can render " websafe " fonts. However, this again will depend on whether these fonts are installed on the machine in question. If, for example, your web server is running Linux, you might be in trouble. This is because the "websafe" fonts are actually Microsoft fonts and are licensed for use by operating systems such as Windows and OSX. These fonts are not necessarily installed on other operating systems and may need to be manually installed as described here .

+3


source


since the header and footer are separate from each other, you need to include fonts in each part.

please follow the example and get the result in the title

add this to your header:

"<style> "+
                        "@font-face {"+
                        " format('ttf'); "+
                        "font-family: 'Open Sans'; "+
                        "font-style: normal; "+
                        "font-weight: 400; "+
                        "src: url(" + url + "/fonts/Open_Sans/OpenSans-Regular.ttf)  format('truetype');"+
                        "} " +
                "* { font-family: 'Open Sans'; } </style > "


the url parameter specifies the path to the phantomjs.exe running and you declare it with:

url = 'file:///' + fs.absolute('./');

should work in the header,

hope this helps anyone

0


source


I've spent a lot of time trying to solve a similar problem. I had a @font-face

specific one with various urls (absolute paths, relative, http urls, etc.) and nothing worked. Everything started working after putting all the fonts in the directory ~/.fonts

, removing the entire @font-face

CSS declaration , and using it only font-family

. This was on a CentOS Linux distribution (c phantomjs-prebuilt

, version: 2.1.16), but I think it will work on the other as well.

html, body {
    font-family: 'Roboto Condensed', sans-serif;
    zoom: 0.70; /* fix for too large fonts */   
} 

$ ls ~/.fonts/
drwxr-xr-x.  2 root root   4096 06-03 15:16 .
drwxr-xr-x. 10 root root   4096 04-15 13:56 ..
-rw-r--r--.  1 root root  11358 2017-05-26  LICENSE.txt
-rw-r--r--.  1 root root 175888 2017-05-26  RobotoCondensed-BoldItalic.ttf
-rw-r--r--.  1 root root 169800 2017-05-26  RobotoCondensed-Bold.ttf
-rw-r--r--.  1 root root 175188 2017-05-26  RobotoCondensed-Italic.ttf
-rw-r--r--.  1 root root 175380 2017-05-26  RobotoCondensed-LightItalic.ttf
-rw-r--r--.  1 root root 168004 2017-05-26  RobotoCondensed-Light.ttf
-rw-r--r--.  1 root root 170284 2017-05-26  RobotoCondensed-Regular.ttf
0


source






More articles:


All Articles