Search code examples
htmlcssfontsfont-face

Font is cropped on the bottom

I imported a font in my CSS file with font-face and used it in my navigation menu.

The problem is that the letters are cropped at the bottom and it kinda ruins the font.

See for yourself: dev.windbournecitizen.com/frontpage

It should look like this (with the changed text of course) enter image description here

The font looks normal when you zoom in (with CTRL+Scroll) but not when you are not zommed in.

Is there any way to fix this?

The problem is encountered on Chrome 35 and Firefox 30 running on Windows 7

Solution

  • I managed to fix it.

    By adding a stroke to the text it is possible to make the letters a bit bigger and the bottom of each letters is showing (almost) correctly. There are no more gaps.

    I used this code to fix it:

    -webkit-text-stroke-width: 0.5px;
-webkit-text-stroke-color: #fe9f00;

    It can also be (kinda) fixed using text-shadow. It can be used as an alternative for browser who do not support -webkit-text-stroke