Now when using custom fonts on a website are very common and popular, you could run into issue when the text in input or textarea is cut off or simply doesn’t fit in the area.

Let’s consider this example where the font-style for the input is italic.

input_idle

As you can see, the part of the letter is outside of the input. To fix  this we can use padding.

input_padding

That was easy, right? So let’s now go, and focus on that input:

input_focus

Oops. That’s not good. And no matter how much padding you will add, the letter “p” will always stay cut. And once focus is gone, the text is fully visible again.

So what now? text-indent to the rescue! ;o)

input_indent

To solve this issue, just add text-indent to the input equal to padding-left and it should work just fine.