Working with two different font filesets has presented me with a challenge. One is in OTF format and the other is in WOFF. Unfortunately, I have noticed that these fonts are rendered differently on various operating systems, leading to alignment issues in my layout. The code snippets and screenshots below highlight this issue:
CSS:
div { float:left; padding:0; margin:0 10px; color:#fff; font-size:25px; }
.galano { background-color:#1a2; font-family: 'Galano Grotesque'; }
.coves { background-color:#21a; font-family: 'Coves'; }
HTML:
<body>
<div class="galano">padding:0</div>
<div class="coves" >padding:0</div>
</body>
Screenshot from operating system 1:
https://i.sstatic.net/cH4Bn.png
Screenshot from operating system 2:
https://i.sstatic.net/zAw5s.png
I've observed that the font with the green background appears to have additional intrinsic padding, causing the element to be taller than necessary. While I could adjust for this extra space when aligning elements with varying fonts, the main issue lies in the inconsistency of the text's position within its bounding box across different operating systems. This would require specific adjustments for each OS.
I would prefer to avoid using conditional CSS, so my question is: Is there a CSS property I can utilize to disregard a font's intrinsic padding (ensuring the bounding box only accommodates visible glyphs), allowing me to apply consistent padding across all operating systems?
Thank you!