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.