Equal Height Blocks in Rows (a webfont issue)

[heisrichard]

Having taken advantage of this snippet of cleverness – css-tricks.com/8401-equal-height-blocks-in-rows/ – I was wondering why it wasn’t working quite as it should, columns were obviously adjusting, just not quite enough.

When I added additional copy to the blocks, it often fixed the issue.

I am using Google fonts to bring in some slightly more attractive fonts, and it appears this is the issue. The snippet of cleverness is rendering the blocks as if it were using the webfont’s fallback (in this case “Times New Roman”, which renders much smaller than the “Lora” I am using.)

Other than using an alternative fall back font which is of similar size, has anyone got any recommendations or solutions.

(More info if needed)

Cheers,
Richard

[Mottie]

I’m about to run out to lunch, but I made the code from that post into a plugin… I changed it so you can use “outerHeight” if you want so the height should include any padding.

I’ll test it with Google fonts when I get back :)

[Mottie]

Ok, I added headers to the blocks and found out it wasn’t working in Chrome just right. I’ve updated my plugin to include headers and fixed the problem :)

[heisrichard]

Hi Mottie,

Cheers for looking into this… I’ll take a look when I get back to the project. What I found was that it was accurate (at least, what I expected in Chrome, Safari and IE9) it was rendering based on fallback fonts in Opera and FF (latest versions).

I’ll try and upload an example later.

[Author]

Posts