I have developed a small engine that produces PDFs using wkhtmltopdf.
While working on my PC (Fedora 24) the generated PDF looked ok. After installing the software on a test server (CentOS 7), I found that the generated PDFs are slightly different.
I'm using a standalone (not installed via package manager) version of the tool. More precisely I'm using version wkhtmltopdf 0.12.3 (with patched qt)
After some investigation I noticed that the PDFs produced on my system contained these fonts:
Instead the PDF generated on the server contains these:
In the CSS I'm using these fonts for the whole document:
/* open-sans-300 - latin */
#font-face {
font-family: 'Open-Sans-Light';
font-style: normal;
font-weight: 300;
src: url('../fonts/open-sans-v13-latin-300.eot'); /* IE9 Compat Modes */
src: local('Open Sans Light'), local('OpenSans-Light'),
url('../fonts/open-sans-v13-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/open-sans-v13-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v13-latin-300.woff') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v13-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/open-sans-v13-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-regular - latin */
#font-face {
font-family: 'Open-Sans-Regular';
font-style: normal;
font-weight: 400;
src: url('../fonts/open-sans-v13-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Open Sans'), local('OpenSans'),
url('../fonts/open-sans-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/open-sans-v13-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-300italic - latin */
#font-face {
font-family: 'Open-Sans-Light-Italic';
font-style: italic;
font-weight: 300;
src: url('../fonts/open-sans-v13-latin-300italic.eot'); /* IE9 Compat Modes */
src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'),
url('../fonts/open-sans-v13-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/open-sans-v13-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v13-latin-300italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v13-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/open-sans-v13-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin */
#font-face {
font-family: 'Open-Sans-Bold';
font-style: normal;
font-weight: 700;
src: url('../fonts/open-sans-v13-latin-700.eot'); /* IE9 Compat Modes */
src: local('Open Sans Bold'), local('OpenSans-Bold'),
url('../fonts/open-sans-v13-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/open-sans-v13-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v13-latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v13-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/open-sans-v13-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}
So why is wkhtmltopdf embedding extra fonts?
How can I make sure that wkhtmltopdf uses Open Sans only and that I can obtain the same PDF no matter which system I run the software on?
Right now it seems to pick randomly fonts it finds available in the system, besides the ones I specified :|
On Windows I had the opposite: on the development machine fonts were embedded in the PDF just fine, but on other machines (For example the production server) fonts were missing and not embedded.
I investigated the log files and all fonts were properly downloaded from the machine as expected when a PDF was generated.
As last resort I installed all fonts on the system of the server (via control panel). This resolved the issue....
I think this has to do with a difference in the fonts installed on the system.
Related
I got the following error using internet explorer 11.
CSS3111: #font-face encountered unknown error.
lato-v16-latin-100italic.eot
This is how I included it to fonts.css
/* lato-100italic - latin */
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 100;
src: url('../fonts/lato-v16-latin-100italic.eot'); /* IE9 Compat Modes */
src: local('Lato Hairline Italic'), local('Lato-HairlineItalic'),
url('../fonts/lato-v16-latin-100italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/lato-v16-latin-100italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/lato-v16-latin-100italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/lato-v16-latin-100italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/lato-v16-latin-100italic.svg#Lato') format('svg'); /* Legacy iOS */
}
I followed https://google-webfonts-helper.herokuapp.com/fonts to include the fonts.
What can I do to solve this issue? I understand that comment src: url('../fonts/lato-v16-latin-100italic.eot'); /* IE9 Compat Modes */ that this is going to prevent errors in IE9..?
I want to host my Google Font locally. I downloaded the files from Google Webfonts Helper and uploaded to public_html/fonts. I added the given code to my theme's style.css (see below).
Then I turned on "Disable Google Fonts" in the Clearfy plugin which actually removes the gstatic and googleapis requests on GTmetrix. However, my local fonts don't show.
Purging cache and server cache doesn't help. I checked the URL of the font location in my browser, it downloads the font, so I assume the path is correct.
Any ideas where the problem could be?
#font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 300;
src: url('https://myurl.com/fonts/comfortaa-v28-latin-300.eot'); /* IE9 Compat Modes */
src: local(''),
url('https://myurl.com/fonts/comfortaa-v28-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://myurl.com/fonts/comfortaa-v28-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('https://myurl.com/fonts/comfortaa-v28-latin-300.woff') format('woff'), /* Modern Browsers */
url('https://myurl.com/fonts/comfortaa-v28-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://myurl.com/fonts/comfortaa-v28-latin-300.svg#Comfortaa') format('svg'); /* Legacy iOS */
}
/* comfortaa-regular - latin */
#font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 400;
src: url('https://myurl.com/fonts/comfortaa-v28-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('https://myurl.com/fonts/comfortaa-v28-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://myurl.com/fonts/comfortaa-v28-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('https://myurl.com/fonts/comfortaa-v28-latin-regular.woff') format('woff'), /* Modern Browsers */
url('https://myurl.com/fonts/comfortaa-v28-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://myurl.com/fonts/comfortaa-v28-latin-regular.svg#Comfortaa') format('svg'); /* Legacy iOS */
}
/* comfortaa-700 - latin */
#font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 700;
src: url('https://myurl.com/fonts/comfortaa-v28-latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
url('https://myurl.com/fonts/comfortaa-v28-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://myurl.com/fonts/comfortaa-v28-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('https://myurl.com/fonts/comfortaa-v28-latin-700.woff') format('woff'), /* Modern Browsers */
url('https://myurl.com/fonts/comfortaa-v28-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://myurl.com/fonts/comfortaa-v28-latin-700.svg#Comfortaa') format('svg'); /* Legacy iOS */
}
body{ font-family:"Comfortaa",sans-serif; }
I am currently stuck on my AMP site. I have a CSS file just for my AMP site and i set the font-face below for it.
I have to use the something like this because I need to access those font-files from my assets folder.
I am using Rails 5
#font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
src:font-url('poppins-v5-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Poppins Regular'), local('Poppins-Regular'),
font-url('poppins-v5-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
font-url('poppins-v5-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
font-url('poppins-v5-latin-regular.woff') format('woff'), /* Modern Browsers */
font-url('poppins-v5-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
font-url('poppins-v5-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-700 - latin */
#font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
src:font-url('poppins-v5-latin-700.eot'); /* IE9 Compat Modes */
src: local('Poppins Bold'), local('Poppins-Bold'),
font-url('poppins-v5-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
font-url('poppins-v5-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
font-url('poppins-v5-latin-700.woff') format('woff'), /* Modern Browsers */
font-url('poppins-v5-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
font-url('poppins-v5-latin-700.svg#Poppins') format('svg'); /* Legacy iOS */
}
Best regards!
Fonts included via #font-face must be fetched via the HTTP or HTTPS scheme.
Source: https://www.ampproject.org/docs/design/responsive/custom_fonts
Via #font-face (no restrictions, all fonts allowed), You should use the full path.
Eg: http://somedomain.org/VeraSeBd.ttf or https://somedomain.org/VeraSeBd.ttf
<style amp-custom>
#font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://somedomain.org/VeraSeBd.ttf");
}
body {
font-family: "Bitstream Vera Serif Bold", serif;
}
</style>
Fonts included via #font-face must be fetched via the HTTP or HTTPS scheme.
I downloaded a font and in my CSS I have :
#font-face {
font-family: "Gotham Medium";
src: url("Gotham/Gotham-Medium.otf");}
When I call say in
h1 { font-family:'Gotham Medium'}
the font display does not match what Gotham should look like. Nor is it a default font.
Is the problem a matter of something being changed when downloaded in my laptop ?
The font is not in the google API so I can't try with an external link.
Your Css should be like this :
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
css Trick
To do this you can use a generator for font-face but you must have the license for the web font
I'm having trouble getting a font to display in Google Chrome (Version 51.0.2704.106 (64-bit))
Safari and Firefox work fine.
Here is the code I am using as an example.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
font-weight: normal;
font-style: normal;
}
I have converted the font to woff2 on multiple sites. What might the problem be?
I recently had browser issues implementing #font-face on a website. Here were some of the solutions that worked:
Try using "" instead of '' for the url and format
Try not calling .svg last
Try specifying font-weight and font-style for each #font-face reference
Did you correctly reference the font-family later in the CSS?
With all the above changes, your code might look like this:
#font-face {
font-family: "MyWebFont";
src: url("webfont.eot"); /* IE9 Compat Modes */
src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("webfont.svg#svgFontName") format("svg"); /* Legacy iOS */
url("webfont.woff2") format("woff2"), /* Super Modern Browsers */
url("webfont.woff") format("woff"), /* Pretty Modern Browsers */
url("webfont.ttf") format("truetype") /* Safari, Android, iOS */
font-weight: normal;
font-style: normal;
}
Later on in the stylesheet:
body {
font-family: "MyWebFont";
}