How to make printing font size same as screen font size?

  • Unknown's avatar
    teejay0023 · Member ·

    Greetings,

    I want to print pages with the same font size that the website shows on my screen, but the font size is much larger. I use this CSS code to control the screen font size:

    p {
    font-size: 14px;
    }

    What is the equivalent code to make the printed page font size the same or smaller?

    Thanks,
    TJ

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    You can use a print Media Query something like this. 

    @media print {
	p {
		font-size: 12pt;
	}
}

    You will want to use points (pt) in the print media query since text is done in points on printers. You will have to experiment a bit to get things to look like you want them to when printed.

  • Unknown's avatar
    teejay0023 · Member ·

    Howdy, I appreciate your assistance. I tried this but it’s not working. Here it is recommended to clear the cache: http://stackoverflow.com/questions/32429832/how-to-control-print-font-size
    So I tried clearing the cache in both Chrome and Firefox and cutting and pasting your CSS code into the customization window but it is still displaying a gigantic font when I go to print.

    I currently have this code in the window:

    p {
    font-size: 14px;
    }

    @media print {
    p {
    font-size: 12pt;
    }
    }

    The upper code controls the font size displayed on the screen perfectly, and when I change the number it changes in real time. However I cannot do anything with the bottom portion to get what the printout is supposed to look like (based on what appears on the print preview screen) or the pdf generated through the print command to change the font. It is always the same size in Chrome, Safari, and Firefox. Again, I have cleared the cache in both Chrome and Firefox (but not Safari…) Any other ideas? Thanks again!

  • Unknown's avatar
    thesacredpath · Member ·

    @teejay0023, give this a try. I temporarily added it to your customizer to test and then set things back to where you had it. Now the caveat: Firefox ignores this and does its own thing. I looked through the Firefox preferences and there really isn’t anything I can see that can be changed. I’ve also included a h1.entry-title font size declaration so you can adjust that if you wish. Chrome and Safari seem fine with the following. I’ve got 20 and 24 for the font point sizes below, but you can adjust those as you see fit. 

    @media print {
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
           font-size: 20pt !important;
	  }
	  h1.entry-title {
	  font-size: 24pt !important;
         }
}
  • Unknown's avatar
    teejay0023 · Member ·

    Thank you so much, this works great in Chrome, which is what I generally prefer.

    All the best!!

  • Unknown's avatar
    thesacredpath · Member ·

    Awesome, and you are welcome.

  • The topic ‘How to make printing font size same as screen font size?’ is closed to new replies.