0

Having a tough time cracking this one – the vertical positioning of text in an input field is always high, on mobile Safari (and Chrome) when using web fonts. Specifically, DIN Next from Monotype Webfonts http://www.fonts.com/font/linotype/din-next?QueryFontType=Web#buying-options

I've tried setting the line-height, adjusting padding, and the input height, to no avail. The text is always higher than it should be.

When the webfonts are not applied to input fields, it looks great.

Using HTML5 Boilerplate, with normalize.css

Screenshot here: https://www.evernote.com/shard/s4/sh/49486b48-98a6-4cf0-80ab-52c96f052bc6/a889ee43c1c08b7c2ee5433a139708ac

Keith Harper
  • 1
  • 1
  • Post a live demo that uses a free webfont (try Google Webfonts), as it's best if we can play with the HTML/CSS. – Blender Aug 16 '12 at 00:48
  • Hey Blender - I unfortunately can't link to this page right now, it's not publicly available. I'll see if I can find an example of an existing page… – Keith Harper Aug 16 '12 at 00:55

1 Answers1

0

The issue appears to be something related to the font file. Tested with a Typekit font and was able to resolve the problem.

Keith Harper
  • 1
  • 1