Lesson: lesson-fonts

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

PDF files

Converter PDF Preview
PDFreactor
OK
Download
PrinceXML
OK
Download
Antennahouse
OK
Download
Vivliostyle
OK
Download

Stylesheet

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
@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;
}

HTML input

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<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>