How to use a Google font when printing?

Question

How to use a Google font when printing?

Navigation

#1 by (1 votes)

2

I'm using this source:

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

It works normally on the page. But when it comes to printing the font, it does not come out in the preview or print. I am using the print() function of javascript . Can you use a google font in print?

EDIT:

CSS :

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

A 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 JQuery function 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();
});

css font

asked by anonymous 06.06.2018 / 14:30

1 answer

POST model arriving null in controller Generate random number and add Class to the body of the Wordpress login page

score 1 · Answer 1

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

Try to call it the source:

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

... and add again in the 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>");

Note: a tag <style> in writeln has been added by you, since it is normally inserted in <head> , as well as <link> , so there is no problem in calling the source in that function.