Freddi

у него высота задана, незнаю весь зависимый цсс могу предположить что там есть overflow и поэтомы фон режется, я так понял хотите выровнять этот блок, надо дигать не фон а весь span например или его родителя.

Лучше css гугл подключаю так

для локального хранения пользовался www.fontsquirrel.com/tools/webfont-generator
он и css и шрифты генерит из нужных

у вас там padding, для учета ширины с падингом надо добавить в css

box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box

отдельно и добавлять font-style, font-weight, смотря что надо.

@font-face {
    font-family: BeauSans; 
    src: url(fonts/PFBeauSansPro-Black.ttf);
    font-style: normal;
}
@font-face {
    font-family: BeauSans; 
    src: url(fonts/PFBeauSansPro-BlackItalic.ttf);
    font-style: italic;
}