Freddi

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

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

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

Самый простой вариант сделать так https://jsfiddle.net/90aauu1L/
на балынух можно убрать, можно оставить. Текс тоже от вас зависит

у вас там 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;
}

Если конкретно dropbox, там есть api https://www.dropbox.com/developers
была както подобная задача, только нужно было из g+ альбома брать, для него попался готовый скрипт, также можно вывести фотки из альбома вк группы. А потом к полученому уже вешать хоть Lightbox