How to use a Google font when printing?

Asked

Viewed 152 times

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 printing the font does not come out in preview or print. I am using the function print() of javascript. You can use a google font in printing?

EDIT:

The 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 printing:

$('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

  • I’m not sure if the source will help, but try to use the media="all", ex.: <href="https://fonts.googleapis.com/css?family=Meie+Script" rel="stylesheet" media="all" >

  • 1

    I have tested and seems to be working perfectly (http://output.jsbin.com/qakudiwibe). Can do a [mcve] demonstrating the problem?

  • @Andersoncarloswoss really works like this, but if I specify that I only want to print a specific diva font does not work on it. Ex: . class{ font-family: 'Meie Script', cursive; }

  • So that’s why the [mcve]. Do it will be easier to help you.

  • @Andersoncarloswoss edited the question

  • And there’s the problem: you’re loading the content that will be printed in another window (window.open), but in no time did you carry the fountain in it.

  • Placing this link <link href="https://fonts.googleapis.com/css?family=Meie+Script" rel="stylesheet"> in the writeln of the function is correct?

Show 2 more comments

1 answer

1

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

Try calling the source that way:

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

...and re-add to CSS the source that should be used, making:

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.: was added (by you) a tag <style> in the writeln and since it is normally inserted into the <head>, as well as the <link>, then there is no problem in calling the source in that function.

Browser other questions tagged css font

You are not signed in. Login or sign up in order to post.