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

HTML input

<html>
    <head>
        <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

@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;
}