Fonts

The example shows the basic usage of arbitrary truetype or opentype fonts using @font-face in CSS.

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  OK
PrinceXML  OK
Antennahouse  OK
Weasyprint  OK
PagedJS  OK
Typeset.sh  OK
Vivliostyle  OK
BFO  OK
OK OK with issues Error Unsupported

HTML input

<html>
    <head>
        <meta charset="utf8"/>
        <title>Sample</title>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
        <p id="block1">
            This is some sample text :-) üöäÜÖÄ
        </p>
        <p id="block2">
            This is some sample text :-) üöäÜÖÄ
        </p>
        <p id="block3">
            This is some sample text :-) üöäÜÖÄ
        </p>
    </body>
</html>

Stylesheet

@import url("../styles/a4.css");

div.outer {
    font-size: 14pt;
    color: red;
    text-align: justify;
    width: 80%;
    margin-bottom: 2em;
}

img {
    width: 20%;
}

.img-left {
    float: left;
    margin-right: 0.5em;
    margin-bottom: 0.25em;
}

.img-right {
    float: right;
    margin-left: 0.5em;
    margin-bottom: 0.25em;
}


table {
    border: 1px solid black;
    width: 50%;
    border-collapse: collapse;
}

td, th {
    border: 1px solid black;
    text-align: center;
}

@font-face {
    font-family: Font1;
    src: url(Chunkfive.otf);
}

@font-face {
    font-family: Font2;
    src: url(AlexBrush-Regular.ttf);
}

@font-face {
    font-family: Font3;
    src: url(Forum-Regular.ttf);
}

#block1 {
    font-family: Font1;
    font-size: 36pt;
    color: red;
}

#block2 {
    font-family: Font2;
    font-size: 36pt;
    color: blue;
}

#block3 {
    font-family: Font3;
    font-size: 36pt;
    color: orange;
}