Printing does not allow font change by CSS

Question

HTML:

    <div class="conteudotopo">
        <div class="container-logo">
            <img src="VX_LOGOTIPO"  height="30" />
        </div>
        <p>NF: 112233</p>
        <!-- <p>Pedido: 0</p> -->
    </div>

CSS:

.conteudotopo{
margin: 2px;
flex: 1;
height:25mm;
font-size: 26px;
}

You can see in "NF: 112233" that even with font-size: 26px, the font size is not changed. I have to use Chrome

Answer 1

You can force print style using a media querie Print, like @media print directly on <p> .conteudotopo > p. Here you can read more if you are interested https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Responsive/Media_types

That way your CSS would look like this:

@media print {
    .conteudotopo > p {
        font-size: 26px !important;
    }
}