i need to create a PDF Buffer and save this to the database. I am passing the complete DOM to puppeteer and most of it works just fine. When i open the created PDF Buffer, bootstrap styles are applied and i get a beautifull PDF.
However, font-awesome icons will not show up. i have only two CSS files: framework.css (created with SASS and containing custom styles, bootstrap styles and font-awesome) and print-media (contains print media css to hide or show stuff like the navigation). Here is my Code to create the PDF Buffer:
const browser = await puppeteer.launch({
args: ['--disable-dev-shm-usage', '--no-sandbox', '--headless', '--disable-gpu'],
executablePath: pathToChrome}
);
const page = await browser.newPage();
const content = await page.setContent(pdfOptions.dom);
const addCss7 = await page.addStyleTag({path: appPath + '/public/css/framework.css'});
const addCss8 = await page.addStyleTag({path: appPath + '/public/css/print-media.css'});
const buffer = await page.pdf();
F.log(buffer);
Inside the css folder i created a fonts folder containing the font-awesome fonts and #font-face refers to this path:
#font-face {
font-family: "FontAwesome";
src: url("./fonts/fontawesome-webfont.eot?v=4.7.0");
src: url("./fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("./fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("./fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("./fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("./fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
font-weight: normal;
font-style: normal;
}
Do i have to tell puppeteer that there are fonts it should use specifically or did i miss something else?
Thanks in advance,
Pascal
Edit:
Tried to use absolute path, but this will wont work either. If i do this, even the Website will not contain the fonts.
#font-face {
font-family: "FontAwesome";
src: url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.eot?v=4.7.0");
src: url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.woff?v=4.7.0") format("woff"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("C:\Users\userFolder\someotherFolder\projectFolder\public\css\fonts\fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
font-weight: normal;
font-style: normal;
}
As I commented on the question. The problem is the about:blank location. What I recommend is doing the following:
Create a web folder.
Put there your fonts folder.
Create there an empty.html file. Like this one https://github.com/GoogleChrome/puppeteer/blob/master/test/assets/empty.html
After doing const page = await browser.newPage(); call await page.goto('file://your path/expressed/as/url/web/empty.html');
Now your relative path "./fonts/, should work
I solved this issue by copying the specific fonts to my local filesystem fonts folder. On Mac OS I had to copy all Font Awesome fonts to ~/Library/Fonts.
I have embedded the font awesome css to the HTML header. It worked for me.
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>.
I am feeding HTML content using setContent method but I can see icons on the HTML before including the above link, and I don't like the idea to rely on external css link.
Related
I want to use custom non google font like that:
#font-face {
font-family: 'Hacen Liner Printout Lt';
src: url('https://dl.dropbox.com/s/7nbaxeic1c68ifh/Hacen%20Liner%20Printout%20Lt.ttf?dl=0') format('truetype');
}
* {
font-family: 'Hacen Liner Printout Lt';
}
but it disappears and appears quickly every time the page loads, and I need to cache it.
Only sometimes, I get a PDF rendered from Puppeter without any content:
On the picture above, we are missing all the content inside the table element, as well as the content beside NIF and Número D-U-N-S.
It is an inconsistent error, because most of the times it works properly, but sometimes not.
Here you can see the way we launch Puppeteer:
const launchParams = {
args: ['--no-sandbox', '--disable-setuid-sandbox', 'displayHeaderFooter', 'preferCSSPageSize', 'printBackground']
};
// Launch the browser and create a page
browser = await puppeteer.launch(launchParams);
const page = await browser.newPage();
requestOptions.timeout = 0;
requestOptions.waitUntil = 'networkidle2';
await page.goto(urlOrHtml, requestOptions);
await page.emulateMedia('print');
The font color is black (as I said, most of the times it works well and you can see the text).
I'm seeing the same issue. I am not sure (came here for an answer), but I have an hypothesis.
In my case, I am using web fonts, and I explicitly chose https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&family=Roboto:ital,wght#1,400&display=block, meaning I get font faces like
#font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
font-display: block;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1Mu51xEIzIXKMnyrYk.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
Using font-display: block. See mdn.
Also, there is no fall-back font:
body {
…
font-family: Roboto;
…
}
I really want that font, consistently, and not some fall-back.
font-display: block "Gives the font face a short block period and an infinite swap period.".
Font block period
If the font face is not loaded, any element attempting to use it must
render an invisible fallback font face. If the font face
successfully loads during this period, it is used normally.
So, the hypothesis is that, sometimes the web font loads in time, and sometimes it does not. When it does not, the invisible font is used.
I added ttf fonts to my lambda, in the hope this would force their use, as they are always available, avoiding this timing issue. But, that doesn't work.
Next, I'll try to remove the web fonts from the CSS. Will that force using the TTF fonts?
I'm getting the diagnostic on PageSpeed Insights
Ensure text remains visible during webfont load
Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. Learn more.
URL
Potential Savings
…v1/aWB4m0aac….woff2(fonts.gstatic.com) 10 ms
…v21/nuFvD-vYS….woff2(fonts.gstatic.com) 10 ms
…v13/6xK3dSBYK….woff2(fonts.gstatic.com) 10 ms
And I'm trying to correct it by changing
<link rel="stylesheet" href="https://fonts.googleapis.com" />
to
<link rel="stylesheet" href="https://fonts.googleapis.com/display=swap" />
But this actually throws a console error
I know that PageSpeed Insights recommends to add font-display: swap to #fontface, but I don't know what #fontface is.
I'm using Bootstrap and Gatsby
I know there's also gatsby-plugin-web-font-loader. Is there a way to use this to avoid this diagnostic?
These are all the times font-family shows up in my program. I'm using scss so most of them are variables
I only specify a font once in my program, and I think bootstrap chooses the font the rest of the time
blockquote > p {
font-family: 'Montserrat', sans-serif;
}
Update, I'm using this plugin now
{
resolve: `gatsby-plugin-google-fonts`,
options: {
fonts: [
`Montserrat`,
`Helvetica Neue`,
`Helvetica`,
`Arial`
],
display: 'swap'
}
},
You made a minor mistake.
It should be
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=TheFontYouWantToUse&display=swap />
If you do a forward slash as shown in your example it will result in a 404 not found, hence the console error. Replace it with a URL parameter (&) and it should work fine.
#fontface is just a way of loading a font from within a stylesheet.
For example within your main CSS file you could add the following and that would also load the font in. Notice the font-display property set to swap.
#font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
font-display: swap;
}
#font-face is a rule that allows you to use multiple font-family rule instead of loading it in each selector.
Among all font plugin of fonts in Gatsby I recommend gatsby-plugin-google-fonts because it allows you to display and swap between fonts.
plugins: [
{
resolve: `gatsby-plugin-google-fonts`,
options: {
fonts: [
`limelight`,
`source sans pro\:300,400,400i,700` // you can also specify font weights and styles
],
display: 'swap'
}
}
]
It's really useful since it's preloading the font without affecting the display (due to the swap property).
With Gatsby, <link rel="stylesheet" href="https://fonts.googleapis.com" /> this configuration is automated so you don't need to touch it. It's better to pre-render them using a plugin, since it's the power of Gatsby.
I'm adding font style with css using the #font-face with 4 different formats relatively
#font-face {
font-family: "font_name";
src: url("font_name.eot");
src: local("☺"),
url("font_name.woff") format("woff"),
url("font_name.otf") format("opentype"),
url("font_name.svg#font_name") format("svg");
}
And it works just fine, however if I disable JS, the font is gone and in the console it says: "downloadable font: download failed...".
This happens(from the console) for the .woff and .otf and I don't understand why. How is JS related to this sort of css code?
I am using Sansation as custom font, and it shows fine when I upload my site, but when I debug locally, it ain't showing:
Default.css:
/* #region Fonts */
#font-face {
font-family: "Sansation Regular";
src: url("/Fonts/Sansation_Regular.eot?") format("eot"), url("/Fonts/Sansation_Regular.woff") format("woff"), url("/Fonts/Sansation_Regular.ttf") format("truetype"), url("/Fonts/Sansation_Regular.svg#SansationRegular") format("svg");
font-weight: normal;
font-style: normal;
}
/* #endregion */
body {
font-family: "Sansation Regular";
}
The Fonts are located in:
root:
-Shared:
---Assets:
------CSS:
---------Default.css
------Fonts:
---------Sansation_Regular.xxx
How can I get the fonts to show locally too?
If you are on, e.g. http://foo.com/bar/hello.html, and you encounter a URI with the form /Fonts/world.ttf, it refers to the URL http://foo.com/Fonts/world.ttf.
From your data structure, it looks like the URI to point to your font should have the form /Shared/Assets/Fonts/world.ttf to result in a URL like http://foo.com/Shared/Assets/Fonts/world.ttf
If you open up your developer console and look at network activity, you should see the wrong path in attempted/failing resource loads.