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.
Related
I'm creating a simple Vue app that I will use to generate my CV in a PDF format. I have added google font Montserrat into this project, and when I print this page to file (CTRL + P in Firefox), the text cannot be selected, its like everything is an image.
I started debugging and it seems to happen when I use an imported font. Here is a codepen that can demonstrate what happens https://codepen.io/phlame-/pen/NWNYbyb
How to replicate: Open the pen in Firefox, and print the page to file (CTRL + P). Save and open the file. The second paragraph is selectable as its Arial, but the first one is not (which is Montserrat).
It seems like if you try to do this in Chrome nothing is selectable, but I would like it to work at least in 1 browser - since only I will use it to generate PDFs.
I've tried to import the font through a link tag instead of #import in CSS, tried this answer, tried different Google fonts (Roboto and Lato), this:
#media print {
* {
user-select: text !important;
}
}
All producing same results - unselectable text. Which becomes selectable with a default font...
To be clear: the font renders in the PDF, everything looks as it should, but the text is NOT selectable when clicking and dragging over the text
Has anyone had experience with this? Any help is appreciated
I ran into the same thing once using Overlock on a resume page. The problem is that the browser print utility doesn't recognize fonts that your page downloads on the fly using link tags, as it is customary to do with google fonts. It can only recognize system fonts, meaning the ones you have installed on the machine you're running the Print from.
If some text on your web page is using a font that isn't on your installed system font list, then you won't be able to save it as text in your PDF file. When the print utility encounters such, it treats it as an image.
Different OSes have different ways of examining what fonts you have on your machine ("Font Manager" in Windows, "Font Book" in Mac OS). You can google how to see what fonts you have installed on your machine, and you should find that Montserrat isn't one of them.
To fix this, all you need to do is install the Montserrat google font on your machine. Here is one set of directions on how to do that. Once you've done that, you'll need to restart your browser.
http://granthoneymoon.com/temp.html is the sample page I'm working on.
Any idea why the font styling is not working on my smart phone? It works everywhere else I've tried. But neither bold nor italics work when I look at it on my galaxy 3.
I'm just using font-style and font-weight.
Appearantly, this is somewhat of a known issue with the Samsung S3 devices. There's even a chromium issue regarding it.
You could try visiting the android text test website on your device and see if it displays the font stylings correctly. If it is you should be able to fix your problem by changing the font(s) of the website.
So this one has had my scratching my head for over an hour now. I am designing a Wordpress theme for a client of mine. I originally decided to customize the Toolbox theme, which I did for a week or so. I spent so much time rewriting their theme, I figured it would be better if I just wrote it from scratch. So I did that. I copied over all of the font files that I had and started to work on my header. Now for some reason the spacing is messed up. Originally it looks like:
Which I think is pretty readable. I have the font-size set at 70px on that image. So I copied the SAME exact css properties over to my new file on my new theme. Then I copied the same exact code within my header. When I saved and refreshed my browser, the font was there, but the spaces between the words were really small, and the font was much larger.
Here is was it looked like when I was done:
Looking at it, I think the words are way too close together. It worked fine before and I can't find what would have caused the change. They both have the bootstrap css file attached and the same custom CSS file. I tried adding the original toolbox CSS file to see if it was something in there that caused the change but nothing.
I would really appreciate the help. I've never had this problem before. I'm using Chrome, but the same thing happens in Safari as well. The font I'm using is Bebas Neue from font squirrel
Thank you! If I left any information out, just ask :)
I have one very surprising issue with Google Fonts. This is the site in question.
The title is normaly showing in one ligne but a friend of mine with the same Opera version like me sent me this screenshot. You can see that the title goes in two lines and brakes every think.
It's the first time I use Gfonts and must admit that there is another problem in Firefox too - the font appears so jagged!
Thanks for your advises!
The line break can be prevented simply by adding
h1 { white-space: nowrap; }
Font rendering depends on the font, on the font size, on the browser, on the operating system, on the device, their settings, and probably phase of the moon, too. Some fonts are more difficult than others, so the practical move is to pick up another font.
Unfortunately, not all browsers render all fonts exactly the same way. I guess your problem with the title in Opera is caused by the font being rendered bigger. You can try to target a specific stylesheet for Opera to solve that.
As for the jagged font, well... you have to deal with that, and choose fonts that will look sharp on every browser.
Take a look here : http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/
The jagged issue was solved thanks to this Joomla! extention - KC Cufón Font Replacement. A have included just the characters of my text - only 3KB of js and I left the same Google Web Font loading too in order the text to be shown until the extention loads.
Posting here is a bit of a long shot (I can´t reach the developer), but I´m having a problem with a font that I´m embedding using Google web fonts.
The font I´m embedding is Molengo and the problem I have is that the capital Z does not show up in Firefox 4 nor in IE 9. It does show in Chrome 10.
In Firefox 4 the character occupies space and in IE9 it is totally collapsed.
I can reproduce the problem not only on my test site, but also on the official Google web fonts page. At least on my computer the box of the Z does not show the character in Fx4 and IE9 and I don´t have another machine at hand to test on.
Clicking around on Google web fonts, I found the problem at other places as well, like the % character of the Candal font family.
So is my computer just going crazy or is there a problem with random characters from Google web fonts in Fx4 and IE9? And if it is the latter, is there a solution for this problem?
Edit: I just tried generating some Z's using Molengo on Font Squirrel, but they only seem to generate images instead of actual texts.
I have downloaded the same font from Font Squirrel, uploaded it to my own server and included all types like in the demo page and now it shows the Z both in Firefox 4 and IE9.
And all other characters as far as I can tell :-)
Very weird, the problem seems to be related to Google web fonts only.