I am in the process of creating a Vue application to generate my CV in PDF format. I have incorporated the Google font Montserrat into the project, but when I attempt to print the page to file (CTRL + P in Firefox), the text appears as if it were an image and is not selectable.
Upon investigating, I found that this issue arises when using an imported font. You can see a demonstration of the problem in this CodePen.
To replicate the issue: Open the CodePen in Firefox, print the page to file (CTRL + P), save and open the file. The second paragraph with Arial font is selectable, while the first one with Montserrat font is not.
In Chrome, neither paragraph is selectable. Ideally, I would like this functionality to work in at least one browser, since I will be the only user generating these PDFs.
I have attempted various solutions such as importing the font through a link tag instead of @import in CSS, following suggestions from here, trying different Google fonts like Roboto and Lato, and utilizing the following code:
@media print {
* {
user-select: text !important;
}
}
However, all of these methods yield the same results - unselectable text. The text only becomes selectable when using a default font...
To clarify: the font displays properly in the PDF, everything appears correct, but the text cannot be selected by clicking and dragging over it.
Has anyone encountered this issue before? Any assistance or insights would be greatly appreciated.