Question

I’m working on a website for a friend and im having real trouble implementing a font with @font-face

The problem is that the font does seam to be inline with the box it creates.
If i make a box 10px high with text in, the text floats above where it should be.

When I drag over the text to select it, its seams to have a lot of extra padding at the end of the text.

my question is this, is there a text-line-offset in css or some sort of hack at least, or is it just a rubbish font im using, and if so can you trim fonts…?

I’ve looked lots online but founds lots on not the right thing and no clear solution.

the problem – test website 🙂

I’ve added a like to the live test its the two “buttons” about and contact in the top left that have the issue, box is same size as text, but text is not in box…?

Answer 1

Try something like this, i think it should give you middle vertically aligned text.

.button{
    height:30px;
    lineheight:100%;
}