How to use a Google font when printing?

I'm using this font:

<link href="https://fonts.googleapis.com/css?family=Meie+Script" rel="stylesheet">
font-family: 'Meie Script', cursive;

It works normally on the page. But at the time of printing the Font does not come out in the preview or in the print. I'm using the print() function of the javascript. How to use a Google font in printing?

EDIT:

OR CSS :

<style>
.nomes {
    font-family: 'Rouge Script', cursive !important;              
}
</style>

To div :

<div class="row nomes">
    <div class="container nome-aluno">
         Thiago
    </div>
</div>

The Print button:

<button class="imprimi-certificado btn bg-green waves-effect">
   <i class="material-icons">print</i>
</button>

The function jquery that prints:

$('body').on('click', '.imprimi-certificado', function(){         
     var printContents = $(".cert").html();
     var originalContents = document.body.innerHTML;         
     var WindowObject = window.open("", "PrintWindow","width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");    
    WindowObject.document.writeln("<style>.cert{display:block}.tabela tr td{border-bottom:2px solid #111;}.pagebreak { page-break-before: always; }</style>");
    WindowObject.document.writeln(printContents);
    WindowObject.document.close();
    WindowObject.focus();
    WindowObject.print();
    WindowObject.close();
});
 2
Author: Melissa, 2018-06-06

1 answers

Everything you insert into the writeln function will be the resulting HTML on the new page to print. In the print function you added the styles for printing, but did not call the desired font. Therefore, you should call her again. You can call the font using the tag <link> or do this in CSS itself with @import.

Try calling the source like this:

WindowObject.document.writeln("<link href=\"https://fonts.googleapis.com/css?family=Rouge+Script\" rel=\"stylesheet\">");

...and add again in CSS the font that should be used, doing:

WindowObject.document.writeln("<style>.cert{display:block}.nomes{font-family:'Rouge Script', cursive !important;}.tabela tr td{border-bottom:2px solid #111;}.pagebreak{page-break-before: always;}</style>");

Obs.: a tag has been added (by you <style> in writeln and since it is normally inserted in <head>, just like <link>, then there is no problem calling the source in this function.

 1
Author: Matheus Alves, 2018-07-28 20:10:55