we.type | YS_font-family

<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
|                                                                 |
|                Filename : YS_font-family.html                   |
|                   Label : Basics                                |
|                  Author : Yevheniia Shyrchenko                  |
|                    Size : 2.158 bytes (4 KB on disk)            |
|                 Created : 20. February 2024 at 09:23            |
|                                                                 |
::◂◀▸v▶¤◀v∫∫v▶¤‡‡##‡‡‡‡‡‡‡‡###‡‡###‡‡‡‡##‡‡‡‡##‡‡¤◀v∫∫v▶¤◀v◂▶▸::-->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>font-family</title>

  <style>
    @font-face {
        font-family: Konsole;
        src: url(../_fonts/Konsolev1.1-VF.ttf);
    }

    body {
        font-family: Konsole;
        font-size: 6vh;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        height: 100vh;
    }

    .class-1 {
    /* defines which font is displayed; set to serif */
        font-family: serif;
    }

    .class-2 {
    /* defines which font is displayed; set to sans-serif */
        font-family: sans-serif;
    }

    .class-3 {
    /* defines which font is displayed; set to monospace */
        font-family: monospace;
    }

    .class-4 {
    /* defines which font is displayed; set to cursive */
        font-family: cursive;
    }

    .class-5 {
    /* defines which font is displayed; set to fanatsy */
        font-family: fantasy;
    }
    </style>
</head>

<body>
    <p class="class-1">Serif</p>
    <p class="class-2">Sans Serif</p>
    <p class="class-3">Monospace</p>
    <p class="class-4">Cursive</p>
    <p class="class-5">Fantasy</p>
</body>
</html>