2

Estou usando essa fonte:

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

Ela funciona normalmente na página. Porém na hora de imprimir a fonte não sai na pré-visualização e nem na impressão. Estou usando a função print() do javascript. Tem como usar uma font google na impressão?

EDIT:

O CSS:

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

A div:

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

O botão de imprimir:

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

A função JQuery que imprime:

$('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();
});
7

1 Resposta 1

1

Tudo o que você inserir na função writeln será o HTML resultante na nova página para imprimir. Na função de print você adicionou os estilos para a impressão, porém não chamou a fonte desejada. Portanto, você deve chamá-la novamente. Você pode chamar a fonte usando a tag <link> ou fazer isso no próprio CSS com o @import.

Tente chamar assim a fonte:

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

...e adicionar novamente no CSS a fonte que deverá ser usada, fazendo:

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.: foi adicionada (por você) uma tag <style> no writeln e visto que ela normalmente é inserida no <head>, assim como o <link>, então não há problemas em chamar a fonte nessa função.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .