Creating pdf from html with xhtml2pdf

Question

I want to create a pdf report from an html file and I am running in to two problems. Allgnment and fonts

For the first I have the following

<style>

    @font-face {
        font-family: "DejaVuSansMono";
        src: url("DejaVuSansMono-Bold.ttf");
        font-weight: bold;
    }
    @font-face {
        font-family: "DejaVuSansMono";
        src: url("DejaVuSansMono-Oblique.ttf");
        font-style: italic, oblique;
    }
    @font-face {
        font-family: "DejaVuSansMono";
        src: url("DejaVuSansMono-BoldOblique.ttf");
        font-weight: bold;
        font-style: italic, oblique;
    }
    @font-face {
        font-family: "DejaVuSansMono";
        src: url("DejaVuSansMono.ttf ");
    }
    .table {
        border: 1px solid black;
        background-color:#FCF0FB;
        text-align: center;
        padding-top: 3px;
    }
    @page {
        margin: 1cm;
        margin-bottom: 2.5cm;
        size: a4 portrait;
        margin-top:1cm;
        @frame header {
            -pdf-frame-content: headerContent;
            -pdf-frame-border:1cm;
            height:2cm;
            top: 2cm;
            margin-left:1cm;
            margin-right: 1cm;
        }

        @frame main {
            top:4cm;
            margin-left:1cm;
            margin-right:1cm;
            height:10cm;
            -pdf-frame-border: 1cm;
        }

        @frame footer {
            -pdf-frame-content: footerContent;
            -pdf-frame-border: 1cm;
            bottom: 2cm;
            margin-left: 1cm;
            margin-right: 1cm;
            height:1cm;
        }
    }
    *, html{
        font-family: "DejaVuSansMono";
        font-style:normal;
        font-size 10px;

    }
    .margin-10{
        margin-bottom:10;
    }
</style>


<div class="header" id="headerContent">
    <h3>Header content</h3>

</div>
<div class="margin-10"></div>
<div class="container">
    <h3>Today's appointments</h3>
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>Time</th>
                <th>Patient</th>
                <th>Comments</th>
                <th>Doctor</th>

            </tr>
        </thead>
        <tbody>
            {%for doctor, entries in today.items%}
                {%for entry in entries%}
                    <tr>
                        <td>{{forloop.counter}}</td>
                        <td>{{entry.start|date:"H:i"}}</td>
                        <td>{{entry.patient}}</td>
                        <td>{{entry.comment}}</td>
                        <td>{{entry.doctor}}</td>

                    </tr>
                {%endfor%}
            {%endfor%}
        </tbody>
    </table>
</div>
<div class="footer" id="footerContent">
    <p>Για το Ιατρείο <pdf:pagenumber></p>
</div>

I want to have a header some margin and then the footer. But the margin-10 class I created isn't adding any margin between header and html content

In my footer I have a greek letter that is streesed greek letter. The letter won't appear normally but as a black square. I have added DejaVusans fonts in my media folders of my project, but still it won't work.

The pdf creation code

path = os.path.abspath(os.path.join(MEDIA_ROOT, 'fonts'))
print "Path: ", path
def fetch_resources(uri, rel):
    path = os.path.abspath(os.path.join(rel, uri))
    print uri
    print "Path:", path
    print 'rel: ', rel
    return path

def write_to_pdf(template, context_dict, filename=None):
    #template = Template(template_data)
    template = get_template(template)
    context = Context(context_dict)
    html = template.render(context)
    result = StringIO.StringIO()
    pdf = pisa.pisaDocument(StringIO.StringIO(html.encode("UTF-8")), result, path=path, encoding="UTF-8")
    if not pdf.err:
       response = http.HttpResponse(content_type='application/pdf')
        #response['Content-Disposition'] = 'attachment; filename=%s.pdf' % filename
        response.write(result.getvalue())
        return response
    return http.HttpResponse('Problem creating PDF: %s' % cgi.escape(html))

This is what is printed in terminal from the print statements above

DejaVuSansMono-Bold.ttf
DejaVuSansMono-Oblique.ttf
DejaVuSansMono-BoldOblique.ttf
DejaVuSansMono.ttf 

That is it sees the fonts. What am I doing wrong?