Hi Simon,
Webfonts should work, but there’s a quite few caveats:
- First of all, if you have done some failed tests, re-install the plugin first to make sure the font dir is flushed. If the PDF engine has downloaded the font once and the file was somehow corrupted, it won’t download again and you’re stuck
- You need to do this in the header rather than in the css (i.e. the ‘standard’ method rather than the ‘@import’ method google gives). You can find the header in
html-document-wrapper.php
- You won’t have bold fonts, sometimes. This is an unfortunate issue with the PDF engine/font downloader. The font engine doesn’t support numeric font weights, so you need
font-weight: bold rather than font-weight: 700. For this reason I used to just copy the google font declaration and modify it like this:
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: normal;
src: local('Open Sans'), local('OpenSans'), url(https://themes.googleusercontent.com/static/fonts/opensans/v7/yYRnAC2KygoXnEC8IdU0gQLUuEpTyoUstqEm5AMlJo4.ttf) format('truetype');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: bold;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://themes.googleusercontent.com/static/fonts/opensans/v7/k3k702ZOKiLJc3WVjuplzMDdSZkkecOE1hvV7ZHvhyU.ttf) format('truetype');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: normal;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://themes.googleusercontent.com/static/fonts/opensans/v7/O4NhV7_qs9r9seTo7fnsVCZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: bold;
src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(https://themes.googleusercontent.com/static/fonts/opensans/v7/PRmiXeptR36kaC0GEAetxrQhS7CD3GIaelOwHPAPh9w.ttf) format('truetype');
}
- Note the ttf/’truetype’ urls rather than woff: The supplied font needs to be truetype. Google is quite annoying in that it sends different stylesheets based on the client that retrieves it. This means that if you let the plugin retrieve the stylesheet from google for you, it works fine, but you need to be somthing like Opera 10 for example to get the ttf if you view the stylesheet in your browser. (like this one: https://fonts.googleapis.com/css?family=Open+Sans)
- Make sure to take a complete character set, so that you support any special characters (like latin-ext), most fonts don’t do that out of the box
- Finally, the most simple method by far is to just download the fonts yourself and call them locally on your server. The PDF is generated on the server, so you don’t actually need webfonts.
@font-face {
font-family: 'Your font name';
font-style: normal;
font-weight: normal;
src: url(https://yoursite.com/fonts/yourfont.ttf) format('truetype');
}
@font-face {
font-family: 'Your font name';
font-style: normal;
font-weight: bold;
src: url(https://yoursite.com/fonts/yourfont-bold.ttf) format('truetype');
}
(include italic and bold italic too if you intend to use it)
