I have built a page using Bootstrap 4. I want to print this page to PDF and I want it to be printed exactly as it looks. I used Google Chrome as the browser.
Chrome's print preview displays the page correctly, but the problem is, when I open the file after saving, I see problems with the font such as the letter "L" gets bold. Then I changed the font to Times new roman. It fixed the Ls but this time some other characters were bold. To confirm it, I tried printing Bootstrap's homepage, and there was the same issue.
This is the homepage in Chrome: https://ibb.co/XScJYph
Chrome print preview: https://ibb.co/jG3hWmm
And this is how it looks after saving as a PDF: https://ibb.co/MNBkRtY
How to overcome it and maintain the consistency? Please note that I tried the fonts Times new roman, Arial and Helvetica. All of them had problems, none worked perfectly.
I didn't use any CSS except this line: @media print {body {width: 8.5in;height: 11in;}} which should not be a problem.
Thank you in advance.
I guess this problem depend your computer fonts. I mean when i check same scenario i didn't have an problem.
You can check you reader fonts or you can open that .pdf file on chrome.