03 December 2012

CSS: Specifying different font size for Google Chrome

When using the @font-face property, I’ve found that certain font types are rendered smaller in Google Chrome (and Opera, to a lesser extent) than in Firefox. I don’t know the reason, and I’ve only experienced with certain font types only. It is possible to fix this with media queries by specifying a different font size for Webkit-based browsers like Chrome.

The first step is specifying absolute font size values for the HTML and/or BODY element only, and specify all the other CSS elements relatively, with either .em or %, if this was not done before. With this in mind, instead of defining relative font sizes in out HTML/BODY elements, we define them as we did a few years back:

ulven-icon-css3 ulven-icon-chrome
body {
font-size: 14px;  

Then, we specify a media query that will only apply to webkit browsers:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
	body {
		font-size: 16px;      

Doing so, we single out webkit browsers (Google Chrome, Safari) from the other ones. All of the other CSS elements are though defined with relative font sizes, like so, for example:

p {
font-size: 0.85em;      

If the problem is like mine, it suffices to test which font size value in Chrome corresponds to that of Firefox. Hope this helps.

Last updated on
CSS, Web Design

Related Articles

Responses to the article

Saturday, 21st March 2015

Thank you, thank you, thank you! Spent 40 valuable minutes trying to work out how to resolve size issue. Your page helped a lot!

Leave a response

Fields marked with * are required. Email addresses are never shared.